Merge remote-tracking branch 'upstream/minor'

This commit is contained in:
三咲智子 Kevin Deng 2023-12-06 18:50:31 +08:00
commit c695fdc1de
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
108 changed files with 2217 additions and 1379 deletions

View File

@ -1,3 +1,123 @@
# [3.4.0-alpha.4](https://github.com/vuejs/core/compare/v3.3.10...v3.4.0-alpha.4) (2023-12-04)
### Bug Fixes
* **compiler-core:** fix referencing typo ([#9708](https://github.com/vuejs/core/issues/9708)) ([3071de4](https://github.com/vuejs/core/commit/3071de44bc4bf669ab6b48fd8db8d728c30fdb0c))
* **parser:** fix interpolation parsing in v-pre ([53aaa1e](https://github.com/vuejs/core/commit/53aaa1eb2876baf9de16b2f2c77b2c5fd5173900))
* **parser:** properly set initial inXML state based on root ns ([47ea285](https://github.com/vuejs/core/commit/47ea285be3dcb66a83a593346995b5900d6c5478))
* **parser:** should reset inRCDATA state ([ef97e8b](https://github.com/vuejs/core/commit/ef97e8b07d8350106c940f23679444b698832067))
### Features
* **compiler-core:** support accessing Error as global in template expressions ([#7018](https://github.com/vuejs/core/issues/7018)) ([bcca475](https://github.com/vuejs/core/commit/bcca475dbc58d76434cd8120b94929758cee2825))
* **compiler-sfc:** analyze import usage in template via AST ([#9729](https://github.com/vuejs/core/issues/9729)) ([e8bbc94](https://github.com/vuejs/core/commit/e8bbc946cba6bf74c9da56f938b67d2a04c340ba)), closes [#8897](https://github.com/vuejs/core/issues/8897) [nuxt/nuxt#22416](https://github.com/nuxt/nuxt/issues/22416)
* **compiler-sfc:** bump postcss-modules to v6 ([2a507e3](https://github.com/vuejs/core/commit/2a507e32f0e2ef73813705a568b8633f68bda7a9))
* **compiler:** lift vnode hooks deprecation warning to error ([8abc754](https://github.com/vuejs/core/commit/8abc754d5d86d9dfd5a7927b846f1a743f352364))
* use enum to replace const enum ([#9261](https://github.com/vuejs/core/issues/9261)) ([fff7b86](https://github.com/vuejs/core/commit/fff7b864f4292d0430ba2bda7098ad43876b0210)), closes [#1228](https://github.com/vuejs/core/issues/1228)
# [3.4.0-alpha.3](https://github.com/vuejs/core/compare/v3.4.0-alpha.2...v3.4.0-alpha.3) (2023-11-28)
### Bug Fixes
* **parser:** directive arg should be undefined on shorthands with no arg ([e49dffc](https://github.com/vuejs/core/commit/e49dffc9ece86bddf094b9ad4ad15eb4856d6277))
### Features
* **dx:** link errors to docs in prod build ([#9165](https://github.com/vuejs/core/issues/9165)) ([9f8ba98](https://github.com/vuejs/core/commit/9f8ba9821fe166f77e63fa940e9e7e13ec3344fa))
# [3.4.0-alpha.2](https://github.com/vuejs/core/compare/v3.3.9...v3.4.0-alpha.2) (2023-11-27)
### Bug Fixes
* avoid confusing breakage in @vitejs/plugin-vue ([ceec69c](https://github.com/vuejs/core/commit/ceec69c8ccb96c433a4a506ad2e85e276998bade))
* **compiler-core:** fix line/column tracking when fast forwarding ([2e65ea4](https://github.com/vuejs/core/commit/2e65ea481f74db8649df8110a031cbdc98f98c84))
* **compiler-sfc:** fix ast reuse for ssr ([fb619cf](https://github.com/vuejs/core/commit/fb619cf9a440239f0ba88e327d10001a6a3c8171))
* **compiler-sfc:** support `:is` and `:where` selector in scoped css rewrite ([#8929](https://github.com/vuejs/core/issues/8929)) ([c6083dc](https://github.com/vuejs/core/commit/c6083dcad31f3e9292c687fada9e32f287e2317f))
* **compiler-sfc:** use correct compiler when re-parsing in ssr mode ([678378a](https://github.com/vuejs/core/commit/678378afd559481badb486b243722b6287862e09))
* feat!: remove reactivity transform (#9321) ([79b8a09](https://github.com/vuejs/core/commit/79b8a0905bf363bf82edd2096fef10c3db6d9c3c)), closes [#9321](https://github.com/vuejs/core/issues/9321)
### Features
* **compiler-core:** support specifying root namespace when parsing ([40f72d5](https://github.com/vuejs/core/commit/40f72d5e50b389cb11b7ca13461aa2a75ddacdb4))
* **compiler-core:** support v-bind shorthand for key and value with the same name ([#9451](https://github.com/vuejs/core/issues/9451)) ([26399aa](https://github.com/vuejs/core/commit/26399aa6fac1596b294ffeba06bb498d86f5508c))
* **compiler:** improve parsing tolerance for language-tools ([41ff68e](https://github.com/vuejs/core/commit/41ff68ea579d933333392146625560359acb728a))
* **reactivity:** expose last result for computed getter ([#9497](https://github.com/vuejs/core/issues/9497)) ([48b47a1](https://github.com/vuejs/core/commit/48b47a1ab63577e2dbd91947eea544e3ef185b85))
### Performance Improvements
* avoid sfc source map unnecessary serialization and parsing ([f15d2f6](https://github.com/vuejs/core/commit/f15d2f6cf69c0c39f8dfb5c33122790c68bf92e2))
* **codegen:** optimize line / column calculation during codegen ([3be53d9](https://github.com/vuejs/core/commit/3be53d9b974dae1a10eb795cade71ae765e17574))
* **codegen:** optimize source map generation ([c11002f](https://github.com/vuejs/core/commit/c11002f16afd243a2b15b546816e73882eea9e4d))
* **compiler-sfc:** remove magic-string trim on script ([e8e3ec6](https://github.com/vuejs/core/commit/e8e3ec6ca7392e43975c75b56eaaa711d5ea9410))
* **compiler-sfc:** use faster source map addMapping ([50cde7c](https://github.com/vuejs/core/commit/50cde7cfbcc49022ba88f5f69fa9b930b483c282))
* optimize away isBuiltInType ([66c0ed0](https://github.com/vuejs/core/commit/66c0ed0a3c1c6f37dafc6b1c52b75c6bf60e3136))
* optimize makeMap ([ae6fba9](https://github.com/vuejs/core/commit/ae6fba94954bac6430902f77b0d1113a98a75b18))
* optimize position cloning ([2073236](https://github.com/vuejs/core/commit/20732366b9b3530d33b842cf1fc985919afb9317))
### BREAKING CHANGES
* Reactivity Transform was marked deprecated in 3.3 and is now removed in 3.4. This change does not require a major due to the feature being experimental. Users who wish to continue using the feature can do so via the external plugin at https://vue-macros.dev/features/reactivity-transform.html
# [3.4.0-alpha.1](https://github.com/vuejs/core/compare/v3.3.7...v3.4.0-alpha.1) (2023-10-28)
### Features
* **compiler-core:** export error message ([#8729](https://github.com/vuejs/core/issues/8729)) ([f7e80ee](https://github.com/vuejs/core/commit/f7e80ee4a065a9eaba98720abf415d9e87756cbd))
* **compiler-sfc:** expose resolve type-based props and emits ([#8874](https://github.com/vuejs/core/issues/8874)) ([9e77580](https://github.com/vuejs/core/commit/9e77580c0c2f0d977bd0031a1d43cc334769d433))
* export runtime error strings ([#9301](https://github.com/vuejs/core/issues/9301)) ([feb2f2e](https://github.com/vuejs/core/commit/feb2f2edce2d91218a5e9a52c81e322e4033296b))
* **reactivity:** more efficient reactivity system ([#5912](https://github.com/vuejs/core/issues/5912)) ([16e06ca](https://github.com/vuejs/core/commit/16e06ca08f5a1e2af3fc7fb35de153dbe0c3087d)), closes [#311](https://github.com/vuejs/core/issues/311) [#1811](https://github.com/vuejs/core/issues/1811) [#6018](https://github.com/vuejs/core/issues/6018) [#7160](https://github.com/vuejs/core/issues/7160) [#8714](https://github.com/vuejs/core/issues/8714) [#9149](https://github.com/vuejs/core/issues/9149) [#9419](https://github.com/vuejs/core/issues/9419) [#9464](https://github.com/vuejs/core/issues/9464)
* **runtime-core:** add `once` option to watch ([#9034](https://github.com/vuejs/core/issues/9034)) ([a645e7a](https://github.com/vuejs/core/commit/a645e7aa51006516ba668b3a4365d296eb92ee7d))
## [3.3.10](https://github.com/vuejs/core/compare/v3.3.9...v3.3.10) (2023-12-04)
### Bug Fixes
* **app:** prevent template from being cached between apps with different options ([#9724](https://github.com/vuejs/core/issues/9724)) ([ec71585](https://github.com/vuejs/core/commit/ec715854ca12520b2afc9e9b3981cbae05ae5206)), closes [#9618](https://github.com/vuejs/core/issues/9618)
* **compiler-sfc:** avoid passing forEach index to genMap ([f12db7f](https://github.com/vuejs/core/commit/f12db7fb564a534cef2e5805cc9f54afe5d72fbf))
* **compiler-sfc:** deindent pug/jade templates ([6345197](https://github.com/vuejs/core/commit/634519720a21fb5a6871454e1cadad7053a568b8)), closes [#3231](https://github.com/vuejs/core/issues/3231) [#3842](https://github.com/vuejs/core/issues/3842) [#7723](https://github.com/vuejs/core/issues/7723)
* **compiler-sfc:** fix :where and :is selector in scoped mode with multiple selectors ([#9735](https://github.com/vuejs/core/issues/9735)) ([c3e2c55](https://github.com/vuejs/core/commit/c3e2c556b532656b50b8ab5cd2d9eabc26622d63)), closes [#9707](https://github.com/vuejs/core/issues/9707)
* **compiler-sfc:** generate more treeshaking friendly code ([#9507](https://github.com/vuejs/core/issues/9507)) ([8d74ca0](https://github.com/vuejs/core/commit/8d74ca0e6fa2738ca6854b7e879ff59419f948c7)), closes [#9500](https://github.com/vuejs/core/issues/9500)
* **compiler-sfc:** support inferring generic types ([#8511](https://github.com/vuejs/core/issues/8511)) ([eb5e307](https://github.com/vuejs/core/commit/eb5e307c0be62002e62c4c800d0dfacb39b0d4ca)), closes [#8482](https://github.com/vuejs/core/issues/8482)
* **compiler-sfc:** support resolving components from props ([#8785](https://github.com/vuejs/core/issues/8785)) ([7cbcee3](https://github.com/vuejs/core/commit/7cbcee3d831241a8bd3588ae92d3f27e3641e25f))
* **compiler-sfc:** throw error when failing to load TS during type resolution ([#8883](https://github.com/vuejs/core/issues/8883)) ([4936d2e](https://github.com/vuejs/core/commit/4936d2e11a8d0ca3704bfe408548cb26bb3fd5e9))
* **cssVars:** cssVar names should be double-escaped when generating code for ssr ([#8824](https://github.com/vuejs/core/issues/8824)) ([5199a12](https://github.com/vuejs/core/commit/5199a12f8855cd06f24bf355708b5a2134f63176)), closes [#7823](https://github.com/vuejs/core/issues/7823)
* **deps:** update compiler to ^7.23.4 ([#9681](https://github.com/vuejs/core/issues/9681)) ([31f6ebc](https://github.com/vuejs/core/commit/31f6ebc4df84490ed29fb75e7bf4259200eb51f0))
* **runtime-core:** Suspense get anchor properly in Transition ([#9309](https://github.com/vuejs/core/issues/9309)) ([65f3fe2](https://github.com/vuejs/core/commit/65f3fe273127a8b68e1222fbb306d28d85f01757)), closes [#8105](https://github.com/vuejs/core/issues/8105)
* **runtime-dom:** set width/height with units as attribute ([#8781](https://github.com/vuejs/core/issues/8781)) ([bfc1838](https://github.com/vuejs/core/commit/bfc1838f31199de3f189198a3c234fa7bae91386))
* **ssr:** avoid computed being accidentally cached before server render ([#9688](https://github.com/vuejs/core/issues/9688)) ([30d5d93](https://github.com/vuejs/core/commit/30d5d93a92b2154406ec04f8aca6b217fa01177c)), closes [#5300](https://github.com/vuejs/core/issues/5300)
* **types:** expose emits as props in functional components ([#9234](https://github.com/vuejs/core/issues/9234)) ([887e54c](https://github.com/vuejs/core/commit/887e54c347ea9eac4c721b5e2288f054873d1d30))
* **types:** fix reactive collection types ([#8960](https://github.com/vuejs/core/issues/8960)) ([ad27473](https://github.com/vuejs/core/commit/ad274737015c36906d76f3189203093fa3a2e4e7)), closes [#8904](https://github.com/vuejs/core/issues/8904)
* **types:** improve return type withKeys and withModifiers ([#9734](https://github.com/vuejs/core/issues/9734)) ([43c3cfd](https://github.com/vuejs/core/commit/43c3cfdec5ae5d70fa2a21e857abc2d73f1a0d07))
### Performance Improvements
* optimize on* prop check ([38aaa8c](https://github.com/vuejs/core/commit/38aaa8c88648c54fe2616ad9c0961288092fcb44))
* **runtime-dom:** cache modifier wrapper functions ([da4a4fb](https://github.com/vuejs/core/commit/da4a4fb5e8eee3c6d31f24ebd79a9d0feca56cb2)), closes [#8882](https://github.com/vuejs/core/issues/8882)
* **v-on:** constant handlers with modifiers should not be treated as dynamic ([4d94ebf](https://github.com/vuejs/core/commit/4d94ebfe75174b340d2b794e699cad1add3600a9))
# [3.4.0-alpha.3](https://github.com/vuejs/core/compare/v3.4.0-alpha.2...v3.4.0-alpha.3) (2023-11-28)
@ -97,7 +217,7 @@
* **compiler-sfc:** fix dynamic directive arguments usage check for slots ([#9495](https://github.com/vuejs/core/issues/9495)) ([b39fa1f](https://github.com/vuejs/core/commit/b39fa1f8157647859331ce439c42ae016a49b415)), closes [#9493](https://github.com/vuejs/core/issues/9493)
* **deps:** update dependency @vue/repl to ^2.6.2 ([#9536](https://github.com/vuejs/core/issues/9536)) ([5cef325](https://github.com/vuejs/core/commit/5cef325f41e3b38657c72fa1a38dedeee1c7a60a))
* **deps:** update dependency @vue/repl to ^2.6.3 ([#9540](https://github.com/vuejs/core/issues/9540)) ([176d590](https://github.com/vuejs/core/commit/176d59058c9aecffe9da4d4311e98496684f06d4))
* **hydration:** fix tagName access eeror on comment/text node hydration mismatch ([dd8a0cf](https://github.com/vuejs/core/commit/dd8a0cf5dcde13d2cbd899262a0e07f16e14e489)), closes [#9531](https://github.com/vuejs/core/issues/9531)
* **hydration:** fix tagName access error on comment/text node hydration mismatch ([dd8a0cf](https://github.com/vuejs/core/commit/dd8a0cf5dcde13d2cbd899262a0e07f16e14e489)), closes [#9531](https://github.com/vuejs/core/issues/9531)
* **types:** avoid exposing lru-cache types in generated dts ([462aeb3](https://github.com/vuejs/core/commit/462aeb3b600765e219ded2ee9a0ed1e74df61de0)), closes [#9521](https://github.com/vuejs/core/issues/9521)
* **warn:** avoid warning on empty children with Suspense ([#3962](https://github.com/vuejs/core/issues/3962)) ([405f345](https://github.com/vuejs/core/commit/405f34587a63a5f1e3d147b9848219ea98acc22d))

View File

@ -34,9 +34,10 @@
"dev-vapor-serve": "pnpm -C playground run dev",
"serve": "serve",
"open": "open http://localhost:3000/packages/template-explorer/local.html",
"build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self",
"build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-browser-esm build-ssr-esm build-sfc-playground-self",
"build-all-cjs": "node scripts/build.js vue runtime compiler reactivity shared -af cjs",
"build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
"build-browser-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler && node scripts/build.js vue -f esm-browser",
"build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
"build-sfc-playground-self": "cd packages/sfc-playground && npm run build",
"preinstall": "npx only-allow pnpm",
@ -58,8 +59,8 @@
"node": ">=18.12.0"
},
"devDependencies": {
"@babel/parser": "^7.23.4",
"@babel/types": "^7.23.4",
"@babel/parser": "^7.23.5",
"@babel/types": "^7.23.5",
"@rollup/plugin-alias": "^5.0.1",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-json": "^6.0.1",
@ -68,7 +69,7 @@
"@rollup/plugin-terser": "^0.4.4",
"@types/hash-sum": "^1.0.2",
"@types/minimist": "^1.2.5",
"@types/node": "^20.10.0",
"@types/node": "^20.10.3",
"@types/semver": "^7.5.5",
"@typescript-eslint/parser": "^6.13.0",
"@vitest/coverage-istanbul": "^0.34.6",
@ -94,7 +95,7 @@
"prettier": "^3.1.0",
"pretty-bytes": "^6.1.1",
"pug": "^3.0.2",
"puppeteer": "~21.5.1",
"puppeteer": "~21.5.2",
"rimraf": "^5.0.5",
"rollup": "^4.1.4",
"rollup-plugin-dts": "^6.1.0",
@ -106,9 +107,9 @@
"terser": "^5.22.0",
"todomvc-app-css": "^2.4.3",
"tslib": "^2.6.2",
"tsx": "^4.5.0",
"tsx": "^4.6.2",
"typescript": "^5.2.2",
"vite": "^5.0.0",
"vitest": "^0.34.6"
"vitest": "^1.0.0"
}
}

View File

@ -48,12 +48,12 @@ exports[`compiler: codegen > Element (callExpression + objectExpression + Templa
"
return function render(_ctx, _cache) {
with (_ctx) {
return _createElementVNode(\\"div\\", {
id: \\"foo\\",
return _createElementVNode("div", {
id: "foo",
[prop]: bar,
[foo + bar]: bar
}, [
_createElementVNode(\\"p\\", { \\"some-key\\": \\"foo\\" })
_createElementVNode("p", { "some-key": "foo" })
], 16)
}
}"
@ -63,12 +63,12 @@ exports[`compiler: codegen > assets + temps 1`] = `
"
return function render(_ctx, _cache) {
with (_ctx) {
const _component_Foo = _resolveComponent(\\"Foo\\")
const _component_bar_baz = _resolveComponent(\\"bar-baz\\")
const _component_barbaz = _resolveComponent(\\"barbaz\\")
const _component_Qux = _resolveComponent(\\"Qux\\", true)
const _directive_my_dir_0 = _resolveDirective(\\"my_dir_0\\")
const _directive_my_dir_1 = _resolveDirective(\\"my_dir_1\\")
const _component_Foo = _resolveComponent("Foo")
const _component_bar_baz = _resolveComponent("bar-baz")
const _component_barbaz = _resolveComponent("barbaz")
const _component_Qux = _resolveComponent("Qux", true)
const _directive_my_dir_0 = _resolveDirective("my_dir_0")
const _directive_my_dir_1 = _resolveDirective("my_dir_1")
let _temp0, _temp1, _temp2
return null
@ -80,7 +80,7 @@ exports[`compiler: codegen > comment 1`] = `
"
return function render(_ctx, _cache) {
with (_ctx) {
return _createCommentVNode(\\"foo\\")
return _createCommentVNode("foo")
}
}"
`;
@ -135,7 +135,7 @@ return function render(_ctx, _cache) {
exports[`compiler: codegen > hoists 1`] = `
"
const _hoisted_1 = hello
const _hoisted_2 = { id: \\"foo\\" }
const _hoisted_2 = { id: "foo" }
return function render(_ctx, _cache) {
with (_ctx) {
@ -165,7 +165,7 @@ return function render(_ctx, _cache) {
`;
exports[`compiler: codegen > module mode preamble 1`] = `
"import { createVNode as _createVNode, resolveDirective as _resolveDirective } from \\"vue\\"
"import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue"
export function render(_ctx, _cache) {
return null
@ -173,7 +173,7 @@ export function render(_ctx, _cache) {
`;
exports[`compiler: codegen > module mode preamble w/ optimizeImports: true 1`] = `
"import { createVNode, resolveDirective } from \\"vue\\"
"import { createVNode, resolveDirective } from "vue"
// Binding optimization for webpack code-split
const _createVNode = createVNode, _resolveDirective = resolveDirective
@ -187,7 +187,7 @@ exports[`compiler: codegen > static text 1`] = `
"
return function render(_ctx, _cache) {
with (_ctx) {
return \\"hello\\"
return "hello"
}
}"
`;

View File

@ -7,19 +7,19 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", {
id: \\"foo\\",
return (_openBlock(), _createElementBlock("div", {
id: "foo",
class: _normalizeClass(bar.baz)
}, [
_createTextVNode(_toDisplayString(world.burn()) + \\" \\", 1 /* TEXT */),
_createTextVNode(_toDisplayString(world.burn()) + " ", 1 /* TEXT */),
ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createTextVNode(\\"no\\")
_createTextVNode("no")
], 64 /* STABLE_FRAGMENT */)),
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (value, index) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
]))
}), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */))
@ -31,19 +31,19 @@ exports[`compiler: integration tests > function mode w/ prefixIdentifiers: true
"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = Vue
return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", {
id: \\"foo\\",
return (_openBlock(), _createElementBlock("div", {
id: "foo",
class: _normalizeClass(_ctx.bar.baz)
}, [
_createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
_createTextVNode(_toDisplayString(_ctx.world.burn()) + " ", 1 /* TEXT */),
(_ctx.ok)
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createTextVNode(\\"no\\")
_createTextVNode("no")
], 64 /* STABLE_FRAGMENT */)),
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
]))
}), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */))
@ -51,22 +51,22 @@ return function render(_ctx, _cache) {
`;
exports[`compiler: integration tests > module mode 1`] = `
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from \\"vue\\"
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", {
id: \\"foo\\",
return (_openBlock(), _createElementBlock("div", {
id: "foo",
class: _normalizeClass(_ctx.bar.baz)
}, [
_createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
_createTextVNode(_toDisplayString(_ctx.world.burn()) + " ", 1 /* TEXT */),
(_ctx.ok)
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createTextVNode(\\"no\\")
_createTextVNode("no")
], 64 /* STABLE_FRAGMENT */)),
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
]))
}), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */))

View File

@ -98,7 +98,7 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
"line": 1,
"offset": 36,
},
"source": "<div :class=\\"{ some: condition }\\" />",
"source": "<div :class="{ some: condition }" />",
"start": {
"column": 1,
"line": 1,
@ -152,7 +152,7 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
"line": 1,
"offset": 33,
},
"source": ":class=\\"{ some: condition }\\"",
"source": ":class="{ some: condition }"",
"start": {
"column": 6,
"line": 1,
@ -179,7 +179,7 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
"line": 2,
"offset": 73,
},
"source": "<p v-bind:style=\\"{ color: 'red' }\\"/>",
"source": "<p v-bind:style="{ color: 'red' }"/>",
"start": {
"column": 1,
"line": 2,
@ -233,7 +233,7 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
"line": 2,
"offset": 71,
},
"source": "v-bind:style=\\"{ color: 'red' }\\"",
"source": "v-bind:style="{ color: 'red' }"",
"start": {
"column": 4,
"line": 2,
@ -263,16 +263,16 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
"line": 2,
"offset": 73,
},
"source": "<div :class=\\"{ some: condition }\\" />
<p v-bind:style=\\"{ color: 'red' }\\"/>",
"source": "<div :class="{ some: condition }" />
<p v-bind:style="{ color: 'red' }"/>",
"start": {
"column": 1,
"line": 1,
"offset": 0,
},
},
"source": "<div :class=\\"{ some: condition }\\" />
<p v-bind:style=\\"{ color: 'red' }\\"/>",
"source": "<div :class="{ some: condition }" />
<p v-bind:style="{ color: 'red' }"/>",
"temps": 0,
"type": 0,
}
@ -294,7 +294,7 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"line": 2,
"offset": 73,
},
"source": "<p v-bind:style=\\"{ color: 'red' }\\"/>",
"source": "<p v-bind:style="{ color: 'red' }"/>",
"start": {
"column": 3,
"line": 2,
@ -348,7 +348,7 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"line": 2,
"offset": 71,
},
"source": "v-bind:style=\\"{ color: 'red' }\\"",
"source": "v-bind:style="{ color: 'red' }"",
"start": {
"column": 6,
"line": 2,
@ -390,8 +390,8 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"line": 4,
"offset": 123,
},
"source": "<div :class=\\"{ some: condition }\\">
<p v-bind:style=\\"{ color: 'red' }\\"/>
"source": "<div :class="{ some: condition }">
<p v-bind:style="{ color: 'red' }"/>
<!-- a comment with <html> inside it -->
</div>",
"start": {
@ -447,7 +447,7 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"line": 1,
"offset": 33,
},
"source": ":class=\\"{ some: condition }\\"",
"source": ":class="{ some: condition }"",
"start": {
"column": 6,
"line": 1,
@ -477,8 +477,8 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"line": 4,
"offset": 123,
},
"source": "<div :class=\\"{ some: condition }\\">
<p v-bind:style=\\"{ color: 'red' }\\"/>
"source": "<div :class="{ some: condition }">
<p v-bind:style="{ color: 'red' }"/>
<!-- a comment with <html> inside it -->
</div>",
"start": {
@ -487,8 +487,8 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"offset": 0,
},
},
"source": "<div :class=\\"{ some: condition }\\">
<p v-bind:style=\\"{ color: 'red' }\\"/>
"source": "<div :class="{ some: condition }">
<p v-bind:style="{ color: 'red' }"/>
<!-- a comment with <html> inside it -->
</div>",
"temps": 0,
@ -656,7 +656,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1,
"offset": 33,
},
"source": "<div id=\\"\\" id=\\"\\"></div>",
"source": "<div id="" id=""></div>",
"start": {
"column": 11,
"line": 1,
@ -672,7 +672,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1,
"offset": 20,
},
"source": "id=\\"\\"",
"source": "id=""",
"start": {
"column": 16,
"line": 1,
@ -702,7 +702,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1,
"offset": 20,
},
"source": "\\"\\"",
"source": """",
"start": {
"column": 19,
"line": 1,
@ -719,7 +719,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1,
"offset": 26,
},
"source": "id=\\"\\"",
"source": "id=""",
"start": {
"column": 22,
"line": 1,
@ -749,7 +749,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1,
"offset": 26,
},
"source": "\\"\\"",
"source": """",
"start": {
"column": 25,
"line": 1,
@ -772,7 +772,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1,
"offset": 44,
},
"source": "<template><div id=\\"\\" id=\\"\\"></div></template>",
"source": "<template><div id="" id=""></div></template>",
"start": {
"column": 1,
"line": 1,
@ -798,14 +798,14 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1,
"offset": 44,
},
"source": "<template><div id=\\"\\" id=\\"\\"></div></template>",
"source": "<template><div id="" id=""></div></template>",
"start": {
"column": 1,
"line": 1,
"offset": 0,
},
},
"source": "<template><div id=\\"\\" id=\\"\\"></div></template>",
"source": "<template><div id="" id=""></div></template>",
"temps": 0,
"type": 0,
}
@ -1566,7 +1566,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
"line": 1,
"offset": 23,
},
"source": "<template><div id=\\"abc",
"source": "<template><div id="abc",
"start": {
"column": 1,
"line": 1,
@ -1592,14 +1592,14 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
"line": 1,
"offset": 22,
},
"source": "<template><div id=\\"abc",
"source": "<template><div id="abc",
"start": {
"column": 1,
"line": 1,
"offset": 0,
},
},
"source": "<template><div id=\\"abc",
"source": "<template><div id="abc",
"temps": 0,
"type": 0,
}
@ -1618,7 +1618,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
"line": 1,
"offset": 24,
},
"source": "<template><div id=\\"abc\\"",
"source": "<template><div id="abc"",
"start": {
"column": 1,
"line": 1,
@ -1644,14 +1644,14 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
"line": 1,
"offset": 23,
},
"source": "<template><div id=\\"abc\\"",
"source": "<template><div id="abc"",
"start": {
"column": 1,
"line": 1,
"offset": 0,
},
},
"source": "<template><div id=\\"abc\\"",
"source": "<template><div id="abc"",
"temps": 0,
"type": 0,
}
@ -1688,7 +1688,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
"line": 1,
"offset": 25,
},
"source": "<template><div id=\\"abc\\"/",
"source": "<template><div id="abc"/",
"start": {
"column": 1,
"line": 1,
@ -1714,14 +1714,14 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
"line": 1,
"offset": 24,
},
"source": "<template><div id=\\"abc\\"/",
"source": "<template><div id="abc"/",
"start": {
"column": 1,
"line": 1,
"offset": 0,
},
},
"source": "<template><div id=\\"abc\\"/",
"source": "<template><div id="abc"/",
"temps": 0,
"type": 0,
}
@ -2459,7 +2459,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
"line": 1,
"offset": 29,
},
"source": "<div a\\"bc=''></div>",
"source": "<div a"bc=''></div>",
"start": {
"column": 11,
"line": 1,
@ -2475,21 +2475,21 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
"line": 1,
"offset": 22,
},
"source": "a\\"bc=''",
"source": "a"bc=''",
"start": {
"column": 16,
"line": 1,
"offset": 15,
},
},
"name": "a\\"bc",
"name": "a"bc",
"nameLoc": {
"end": {
"column": 20,
"line": 1,
"offset": 19,
},
"source": "a\\"bc",
"source": "a"bc",
"start": {
"column": 16,
"line": 1,
@ -2528,7 +2528,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
"line": 1,
"offset": 40,
},
"source": "<template><div a\\"bc=''></div></template>",
"source": "<template><div a"bc=''></div></template>",
"start": {
"column": 1,
"line": 1,
@ -2554,14 +2554,14 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
"line": 1,
"offset": 40,
},
"source": "<template><div a\\"bc=''></div></template>",
"source": "<template><div a"bc=''></div></template>",
"start": {
"column": 1,
"line": 1,
"offset": 0,
},
},
"source": "<template><div a\\"bc=''></div></template>",
"source": "<template><div a"bc=''></div></template>",
"temps": 0,
"type": 0,
}
@ -2828,7 +2828,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
"line": 1,
"offset": 30,
},
"source": "<div foo=bar\\"></div>",
"source": "<div foo=bar"></div>",
"start": {
"column": 11,
"line": 1,
@ -2844,7 +2844,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
"line": 1,
"offset": 23,
},
"source": "foo=bar\\"",
"source": "foo=bar"",
"start": {
"column": 16,
"line": 1,
@ -2867,14 +2867,14 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
},
"type": 6,
"value": {
"content": "bar\\"",
"content": "bar"",
"loc": {
"end": {
"column": 24,
"line": 1,
"offset": 23,
},
"source": "bar\\"",
"source": "bar"",
"start": {
"column": 20,
"line": 1,
@ -2897,7 +2897,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
"line": 1,
"offset": 41,
},
"source": "<template><div foo=bar\\"></div></template>",
"source": "<template><div foo=bar"></div></template>",
"start": {
"column": 1,
"line": 1,
@ -2923,14 +2923,14 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
"line": 1,
"offset": 41,
},
"source": "<template><div foo=bar\\"></div></template>",
"source": "<template><div foo=bar"></div></template>",
"start": {
"column": 1,
"line": 1,
"offset": 0,
},
},
"source": "<template><div foo=bar\\"></div></template>",
"source": "<template><div foo=bar"></div></template>",
"temps": 0,
"type": 0,
}

View File

@ -1,14 +1,14 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`scopeId compiler support > should push scopeId for hoisted nodes 1`] = `
"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue"
const _withScopeId = n => (_pushScopeId(\\"test\\"),n=n(),_popScopeId(),n)
const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */))
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */))
const _withScopeId = n => (_pushScopeId("test"),n=n(),_popScopeId(),n)
const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", -1 /* HOISTED */))
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", -1 /* HOISTED */))
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
_hoisted_1,
_createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
_hoisted_2
@ -17,14 +17,14 @@ export function render(_ctx, _cache) {
`;
exports[`scopeId compiler support > should wrap default slot 1`] = `
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\")
const _component_Child = _resolveComponent("Child")
return (_openBlock(), _createBlock(_component_Child, null, {
default: _withCtx(() => [
_createElementVNode(\\"div\\")
_createElementVNode("div")
]),
_: 1 /* STABLE */
}))
@ -32,26 +32,26 @@ export function render(_ctx, _cache) {
`;
exports[`scopeId compiler support > should wrap dynamic slots 1`] = `
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\")
const _component_Child = _resolveComponent("Child")
return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok)
? {
name: \\"foo\\",
name: "foo",
fn: _withCtx(() => [
_createElementVNode(\\"div\\")
_createElementVNode("div")
]),
key: \\"0\\"
key: "0"
}
: undefined,
_renderList(_ctx.list, (i) => {
return {
name: i,
fn: _withCtx(() => [
_createElementVNode(\\"div\\")
_createElementVNode("div")
])
}
})
@ -60,17 +60,17 @@ export function render(_ctx, _cache) {
`;
exports[`scopeId compiler support > should wrap named slots 1`] = `
"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\")
const _component_Child = _resolveComponent("Child")
return (_openBlock(), _createBlock(_component_Child, null, {
foo: _withCtx(({ msg }) => [
_createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
]),
bar: _withCtx(() => [
_createElementVNode(\\"div\\")
_createElementVNode("div")
]),
_: 1 /* STABLE */
}))

View File

@ -632,7 +632,7 @@ describe('compiler: codegen', () => {
test('tag only', () => {
expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(`
"return _createElementVNode(\\"div\\")
"return _createElementVNode("div")
"
`)
expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(`
@ -644,7 +644,7 @@ describe('compiler: codegen', () => {
test('with props', () => {
expect(genCode(createVNodeCall(null, `"div"`, mockProps)))
.toMatchInlineSnapshot(`
"return _createElementVNode(\\"div\\", { foo: \\"bar\\" })
"return _createElementVNode("div", { foo: "bar" })
"
`)
})
@ -652,7 +652,7 @@ describe('compiler: codegen', () => {
test('with children, no props', () => {
expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren)))
.toMatchInlineSnapshot(`
"return _createElementVNode(\\"div\\", null, children)
"return _createElementVNode("div", null, children)
"
`)
})
@ -660,7 +660,7 @@ describe('compiler: codegen', () => {
test('with children + props', () => {
expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren)))
.toMatchInlineSnapshot(`
"return _createElementVNode(\\"div\\", { foo: \\"bar\\" }, children)
"return _createElementVNode("div", { foo: "bar" }, children)
"
`)
})
@ -668,7 +668,7 @@ describe('compiler: codegen', () => {
test('with patchFlag and no children/props', () => {
expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1')))
.toMatchInlineSnapshot(`
"return _createElementVNode(\\"div\\", null, null, 1)
"return _createElementVNode("div", null, null, 1)
"
`)
})
@ -688,7 +688,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
"return (_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
"return (_openBlock(), _createElementBlock("div", { foo: "bar" }, children))
"
`)
})
@ -709,7 +709,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
"return (_openBlock(true), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
"return (_openBlock(true), _createElementBlock("div", { foo: "bar" }, children))
"
`)
})
@ -728,7 +728,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
"return _withDirectives(_createElementVNode(\\"div\\", { foo: \\"bar\\" }, children), [
"return _withDirectives(_createElementVNode("div", { foo: "bar" }, children), [
[foo, bar]
])
"
@ -750,7 +750,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
"return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children)), [
"return _withDirectives((_openBlock(), _createElementBlock("div", { foo: "bar" }, children)), [
[foo, bar]
])
"

View File

@ -1733,6 +1733,35 @@ describe('compiler: parse', () => {
})
})
// https://github.com/vuejs/docs/issues/2586
test('v-pre with half-open interpolation', () => {
const ast = baseParse(
`<div v-pre>
<span>{{ number </span>
<span>}}</span>
</div>
`
)
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(`<div v-pre><span>{{ number </span></div>`)
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(
`<div v-pre/>\n<div :id="foo"><Comp/>{{ bar }}</div>`

View File

@ -4,7 +4,7 @@ exports[`compiler: hoistStatic transform > hoist element with static key 1`] = `
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */)
const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", { key: "foo" }, null, -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
]
@ -13,7 +13,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
}
}"
`;
@ -22,9 +22,9 @@ exports[`compiler: hoistStatic transform > hoist nested static tree 1`] = `
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"p\\", null, [
/*#__PURE__*/_createElementVNode(\\"span\\"),
/*#__PURE__*/_createElementVNode(\\"span\\")
const _hoisted_1 = /*#__PURE__*/_createElementVNode("p", null, [
/*#__PURE__*/_createElementVNode("span"),
/*#__PURE__*/_createElementVNode("span")
], -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
@ -34,7 +34,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
}
}"
`;
@ -43,8 +43,8 @@ exports[`compiler: hoistStatic transform > hoist nested static tree with comment
"const _Vue = Vue
const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
/*#__PURE__*/_createCommentVNode(\\"comment\\")
const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, [
/*#__PURE__*/_createCommentVNode("comment")
], -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
@ -54,7 +54,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
}
}"
`;
@ -63,8 +63,8 @@ exports[`compiler: hoistStatic transform > hoist siblings with common non-hoista
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, null, -1 /* HOISTED */)
const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, null, -1 /* HOISTED */)
const _hoisted_3 = [
_hoisted_1,
_hoisted_2
@ -74,7 +74,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_3))
return (_openBlock(), _createElementBlock("div", null, _hoisted_3))
}
}"
`;
@ -83,7 +83,7 @@ exports[`compiler: hoistStatic transform > hoist simple element 1`] = `
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */)
const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", { class: "inline" }, "hello", -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
]
@ -92,7 +92,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
}
}"
`;
@ -101,16 +101,16 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" }
const _hoisted_1 = { id: "foo" }
return function render(_ctx, _cache) {
with (_ctx) {
const { resolveDirective: _resolveDirective, createElementVNode: _createElementVNode, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\")
const _directive_foo = _resolveDirective("foo")
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_withDirectives(_createElementVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [
return (_openBlock(), _createElementBlock("div", null, [
_withDirectives(_createElementVNode("div", _hoisted_1, null, 512 /* NEED_PATCH */), [
[_directive_foo]
])
]))
@ -122,14 +122,14 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" }
const _hoisted_1 = { id: "foo" }
return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("div", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
]))
}
}"
@ -139,16 +139,16 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
"const _Vue = Vue
const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" }
const _hoisted_1 = { id: "foo" }
return function render(_ctx, _cache) {
with (_ctx) {
const { resolveComponent: _resolveComponent, createVNode: _createVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"div\\", _hoisted_1, [
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("div", _hoisted_1, [
_createVNode(_component_Comp)
])
]))
@ -168,8 +168,8 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("span", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
]))
}
}"
@ -179,7 +179,7 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested stat
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, \\"foo \\" + /*#__PURE__*/_toDisplayString(1) + \\" \\" + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)
const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", null, "foo " + /*#__PURE__*/_toDisplayString(1) + " " + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
]
@ -188,7 +188,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
}
}"
`;
@ -197,7 +197,7 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested stat
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
]
@ -206,7 +206,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
}
}"
`;
@ -215,7 +215,7 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"path\\", { d: \\"M2,3H5.5L12\\" }, null, -1 /* HOISTED */)
const _hoisted_1 = /*#__PURE__*/_createElementVNode("path", { d: "M2,3H5.5L12" }, null, -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
]
@ -224,10 +224,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\")
const _directive_foo = _resolveDirective("foo")
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_withDirectives((_openBlock(), _createElementBlock(\\"svg\\", null, _hoisted_2)), [
return (_openBlock(), _createElementBlock("div", null, [
_withDirectives((_openBlock(), _createElementBlock("svg", null, _hoisted_2)), [
[_directive_foo]
])
]))
@ -236,12 +236,12 @@ return function render(_ctx, _cache) {
`;
exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers + other bindings 1`] = `
"import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"div\\", null, [
_createElementVNode(\\"div\\", {
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("div", null, [
_createElementVNode("div", {
class: _normalizeClass({}),
onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
})
@ -251,12 +251,12 @@ export function render(_ctx, _cache) {
`;
exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers 1`] = `
"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"div\\", null, [
_createElementVNode(\\"div\\", {
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("div", null, [
_createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
})
])
@ -271,10 +271,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
return (_openBlock(), _createElementBlock(\\"p\\", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
return (_openBlock(), _createElementBlock("p", null, [
_createElementVNode("span", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
]))
}), 256 /* UNKEYED_FRAGMENT */))
]))
@ -289,7 +289,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(({ foo }) => [
@ -308,10 +308,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
return (_openBlock(), _createElementBlock(\\"p\\", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */)
return (_openBlock(), _createElementBlock("p", null, [
_createElementVNode("span", null, _toDisplayString(o), 1 /* TEXT */)
]))
}), 256 /* UNKEYED_FRAGMENT */))
]))
@ -326,9 +326,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
return (_openBlock(), _createElementBlock("span", { key: item }))
}), 128 /* KEYED_FRAGMENT */))
]))
}
@ -342,9 +342,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
_createVNode(_component_Comp)
]))
}
@ -358,8 +358,8 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
(_openBlock(), _createElementBlock(\\"div\\", { key: foo }))
return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(), _createElementBlock("div", { key: foo }))
]))
}
}"
@ -369,14 +369,14 @@ exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = [\\"id\\"]
const _hoisted_1 = ["id"]
return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, _hoisted_1)
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("div", { id: foo }, null, 8 /* PROPS */, _hoisted_1)
]))
}
}"
@ -389,8 +389,8 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */)
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("div", { ref: foo }, null, 512 /* NEED_PATCH */)
]))
}
}"
@ -403,7 +403,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\"))
return (_openBlock(), _createElementBlock("div"))
}
}"
`;
@ -412,8 +412,8 @@ exports[`compiler: hoistStatic transform > should hoist v-for children if static
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" }
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
const _hoisted_1 = { id: "foo" }
const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
const _hoisted_3 = [
_hoisted_2
]
@ -422,9 +422,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3))
return (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
}), 256 /* UNKEYED_FRAGMENT */))
]))
}
@ -437,9 +437,9 @@ const { createElementVNode: _createElementVNode, createCommentVNode: _createComm
const _hoisted_1 = {
key: 0,
id: \\"foo\\"
id: "foo"
}
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
const _hoisted_3 = [
_hoisted_2
]
@ -448,10 +448,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
ok
? (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3))
: _createCommentVNode(\\"v-if\\", true)
? (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
: _createCommentVNode("v-if", true)
]))
}
}"

View File

@ -2,7 +2,7 @@
exports[`compiler: expression transform > bindingMetadata > inline mode 1`] = `
"(_ctx, _cache) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.props) + \\" \\" + _toDisplayString(_unref(setup)) + \\" \\" + _toDisplayString(setupConst) + \\" \\" + _toDisplayString(_ctx.data) + \\" \\" + _toDisplayString(_ctx.options) + \\" \\" + _toDisplayString(isNaN.value), 1 /* TEXT */))
return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.props) + " " + _toDisplayString(_unref(setup)) + " " + _toDisplayString(setupConst) + " " + _toDisplayString(_ctx.data) + " " + _toDisplayString(_ctx.options) + " " + _toDisplayString(isNaN.value), 1 /* TEXT */))
}"
`;
@ -10,7 +10,7 @@ exports[`compiler: expression transform > bindingMetadata > non-inline mode 1`]
"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString($props.props) + \\" \\" + _toDisplayString($setup.setup) + \\" \\" + _toDisplayString($data.data) + \\" \\" + _toDisplayString($options.options) + \\" \\" + _toDisplayString($setup.isNaN), 1 /* TEXT */))
return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props.props) + " " + _toDisplayString($setup.setup) + " " + _toDisplayString($data.data) + " " + _toDisplayString($options.options) + " " + _toDisplayString($setup.isNaN), 1 /* TEXT */))
}"
`;
@ -18,13 +18,13 @@ exports[`compiler: expression transform > bindingMetadata > should not prefix te
"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(\\"div\\", {
return (_openBlock(), _createElementBlock("div", {
onClick: () => {
for (let i = 0; i < _ctx.list.length; i++) {
_ctx.log(i)
}
}
}, null, 8 /* PROPS */, [\\"onClick\\"]))
}, null, 8 /* PROPS */, ["onClick"]))
}"
`;
@ -32,13 +32,13 @@ exports[`compiler: expression transform > bindingMetadata > should not prefix te
"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(\\"div\\", {
return (_openBlock(), _createElementBlock("div", {
onClick: () => {
for (const x in _ctx.list) {
_ctx.log(x)
}
}
}, null, 8 /* PROPS */, [\\"onClick\\"]))
}, null, 8 /* PROPS */, ["onClick"]))
}"
`;
@ -46,12 +46,12 @@ exports[`compiler: expression transform > bindingMetadata > should not prefix te
"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(\\"div\\", {
return (_openBlock(), _createElementBlock("div", {
onClick: () => {
for (const x of _ctx.list) {
_ctx.log(x)
}
}
}, null, 8 /* PROPS */, [\\"onClick\\"]))
}, null, 8 /* PROPS */, ["onClick"]))
}"
`;

View File

@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createTextVNode(\\"foo\\")
_createTextVNode("foo")
], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
@ -23,7 +23,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString } = _Vue
return _toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz)
return _toDisplayString(foo) + " bar " + _toDisplayString(baz)
}
}"
`;
@ -36,9 +36,9 @@ return function render(_ctx, _cache) {
const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\"),
_createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
_createElementVNode(\\"div\\")
_createElementVNode("div"),
_createTextVNode(_toDisplayString(foo) + " bar " + _toDisplayString(baz), 1 /* TEXT */),
_createElementVNode("div")
], 64 /* STABLE_FRAGMENT */))
}
}"
@ -52,11 +52,11 @@ return function render(_ctx, _cache) {
const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\"),
_createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
_createElementVNode(\\"div\\"),
_createTextVNode(\\"hello\\"),
_createElementVNode(\\"div\\")
_createElementVNode("div"),
_createTextVNode(_toDisplayString(foo) + " bar " + _toDisplayString(baz), 1 /* TEXT */),
_createElementVNode("div"),
_createTextVNode("hello"),
_createElementVNode("div")
], 64 /* STABLE_FRAGMENT */))
}
}"
@ -69,9 +69,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\")
const _directive_foo = _resolveDirective("foo")
return _withDirectives((_openBlock(), _createElementBlock(\\"p\\", null, [
return _withDirectives((_openBlock(), _createElementBlock("p", null, [
_createTextVNode(_toDisplayString(foo), 1 /* TEXT */)
])), [
[_directive_foo]
@ -100,9 +100,9 @@ return function render(_ctx, _cache) {
const { createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\"),
_createTextVNode(\\"hello\\"),
_createElementVNode(\\"div\\")
_createElementVNode("div"),
_createTextVNode("hello"),
_createElementVNode("div")
], 64 /* STABLE_FRAGMENT */))
}
}"
@ -112,6 +112,6 @@ exports[`compiler: transform text > with prefixIdentifiers: true 1`] = `
"const { toDisplayString: _toDisplayString } = Vue
return function render(_ctx, _cache) {
return _toDisplayString(_ctx.foo) + \\" bar \\" + _toDisplayString(_ctx.baz + _ctx.qux)
return _toDisplayString(_ctx.foo) + " bar " + _toDisplayString(_ctx.baz + _ctx.qux)
}"
`;

View File

@ -8,7 +8,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(\\"span\\"))
return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@ -23,8 +23,8 @@ return function render(_ctx, _cache) {
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(_Fragment, { key: item }, [
\\"hello\\",
_createElementVNode(\\"span\\")
"hello",
_createElementVNode("span")
], 64 /* STABLE_FRAGMENT */))
}), 128 /* KEYED_FRAGMENT */))
}
@ -39,7 +39,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
return (_openBlock(), _createElementBlock("span", { key: item }))
}), 128 /* KEYED_FRAGMENT */))
}
}"
@ -53,7 +53,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, __, index) => {
return (_openBlock(), _createElementBlock(\\"span\\"))
return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@ -67,7 +67,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, __, index) => {
return (_openBlock(), _createElementBlock(\\"span\\"))
return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@ -81,7 +81,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, key, index) => {
return (_openBlock(), _createElementBlock(\\"span\\"))
return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@ -96,8 +96,8 @@ return function render(_ctx, _cache) {
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
\\"hello\\",
_createElementVNode(\\"span\\")
"hello",
_createElementVNode("span")
], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
@ -112,10 +112,10 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(\\"span\\", {
return (_openBlock(), _createElementBlock("span", {
key: item.id,
id: item.id
}, null, 8 /* PROPS */, [\\"id\\"]))
}, null, 8 /* PROPS */, ["id"]))
}), 128 /* KEYED_FRAGMENT */))
}
}"
@ -129,7 +129,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return _renderSlot($slots, \\"default\\")
return _renderSlot($slots, "default")
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@ -143,7 +143,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return _renderSlot($slots, \\"default\\")
return _renderSlot($slots, "default")
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@ -156,10 +156,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, resolveDirective: _resolveDirective, withDirectives: _withDirectives } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\")
const _directive_foo = _resolveDirective("foo")
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
return _withDirectives((_openBlock(), _createElementBlock("div", null, null, 512 /* NEED_PATCH */)), [
[_directive_foo]
])
}), 256 /* UNKEYED_FRAGMENT */))
@ -175,7 +175,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => {
return _createElementVNode(\\"p\\", null, _toDisplayString(item), 1 /* TEXT */)
return _createElementVNode("p", null, _toDisplayString(item), 1 /* TEXT */)
}), 64 /* STABLE_FRAGMENT */))
}
}"
@ -190,9 +190,9 @@ return function render(_ctx, _cache) {
return ok
? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
return (_openBlock(), _createElementBlock(\\"div\\"))
return (_openBlock(), _createElementBlock("div"))
}), 256 /* UNKEYED_FRAGMENT */))
: _createCommentVNode(\\"v-if\\", true)
: _createCommentVNode("v-if", true)
}
}"
`;
@ -208,7 +208,7 @@ return function render(_ctx, _cache) {
? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
: _createCommentVNode(\\"v-if\\", true)
: _createCommentVNode("v-if", true)
}
}"
`;
@ -221,7 +221,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, key, index) => {
return (_openBlock(), _createElementBlock(\\"span\\"))
return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"

View File

@ -8,8 +8,8 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
: _createCommentVNode(\\"v-if\\", true)
? (_openBlock(), _createElementBlock("div", { key: 0 }))
: _createCommentVNode("v-if", true)
}
}"
`;
@ -23,13 +23,13 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
: (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })),
? (_openBlock(), _createElementBlock("div", { key: 0 }))
: (_openBlock(), _createElementBlock("p", { key: 1 })),
another
? (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }))
? (_openBlock(), _createElementBlock("div", { key: 2 }))
: orNot
? (_openBlock(), _createElementBlock(\\"p\\", { key: 3 }))
: (_openBlock(), _createElementBlock(\\"p\\", { key: 4 }))
? (_openBlock(), _createElementBlock("p", { key: 3 }))
: (_openBlock(), _createElementBlock("p", { key: 4 }))
], 64 /* STABLE_FRAGMENT */))
}
}"
@ -44,11 +44,11 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
: _createCommentVNode(\\"v-if\\", true),
? (_openBlock(), _createElementBlock("div", { key: 0 }))
: _createCommentVNode("v-if", true),
orNot
? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
: _createCommentVNode(\\"v-if\\", true)
? (_openBlock(), _createElementBlock("p", { key: 1 }))
: _createCommentVNode("v-if", true)
], 64 /* STABLE_FRAGMENT */))
}
}"
@ -63,11 +63,11 @@ return function render(_ctx, _cache) {
return ok
? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
_createElementVNode(\\"div\\"),
\\"hello\\",
_createElementVNode(\\"p\\")
_createElementVNode("div"),
"hello",
_createElementVNode("p")
], 64 /* STABLE_FRAGMENT */))
: _createCommentVNode(\\"v-if\\", true)
: _createCommentVNode("v-if", true)
}
}"
`;
@ -80,8 +80,8 @@ return function render(_ctx, _cache) {
const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
return ok
? _renderSlot($slots, \\"default\\", { key: 0 })
: _createCommentVNode(\\"v-if\\", true)
? _renderSlot($slots, "default", { key: 0 })
: _createCommentVNode("v-if", true)
}
}"
`;
@ -94,8 +94,8 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
: (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
? (_openBlock(), _createElementBlock("div", { key: 0 }))
: (_openBlock(), _createElementBlock("p", { key: 1 }))
}
}"
`;
@ -108,10 +108,10 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
return ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
? (_openBlock(), _createElementBlock("div", { key: 0 }))
: orNot
? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
: (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 64 /* STABLE_FRAGMENT */))
? (_openBlock(), _createElementBlock("p", { key: 1 }))
: (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, ["fine"], 64 /* STABLE_FRAGMENT */))
}
}"
`;
@ -124,10 +124,10 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
? (_openBlock(), _createElementBlock("div", { key: 0 }))
: orNot
? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
: _createCommentVNode(\\"v-if\\", true)
? (_openBlock(), _createElementBlock("p", { key: 1 }))
: _createCommentVNode("v-if", true)
}
}"
`;
@ -140,8 +140,8 @@ return function render(_ctx, _cache) {
const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
return ok
? _renderSlot($slots, \\"default\\", { key: 0 })
: _createCommentVNode(\\"v-if\\", true)
? _renderSlot($slots, "default", { key: 0 })
: _createCommentVNode("v-if", true)
}
}"
`;

View File

@ -1,44 +1,44 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: v-memo transform > on component 1`] = `
"import { resolveComponent as _resolveComponent, createVNode as _createVNode, withMemo as _withMemo, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { resolveComponent as _resolveComponent, createVNode as _createVNode, withMemo as _withMemo, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
_withMemo([_ctx.x], () => _createVNode(_component_Comp), _cache, 0)
]))
}"
`;
exports[`compiler: v-memo transform > on normal element 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from \\"vue\\"
"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\")), _cache, 0)
return (_openBlock(), _createElementBlock("div", null, [
_withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div")), _cache, 0)
]))
}"
`;
exports[`compiler: v-memo transform > on root element 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from \\"vue\\"
"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from "vue"
export function render(_ctx, _cache) {
return _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\")), _cache, 0)
return _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div")), _cache, 0)
}"
`;
exports[`compiler: v-memo transform > on template v-for 1`] = `
"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, isMemoSame as _isMemoSame, withMemo as _withMemo } from \\"vue\\"
"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, isMemoSame as _isMemoSame, withMemo as _withMemo } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
const _memo = ([x, y === _ctx.z])
if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
const _item = (_openBlock(), _createElementBlock(\\"span\\", { key: x }, \\"foobar\\"))
const _item = (_openBlock(), _createElementBlock("span", { key: x }, "foobar"))
_item.memo = _memo
return _item
}, _cache, 0), 128 /* KEYED_FRAGMENT */))
@ -47,15 +47,15 @@ export function render(_ctx, _cache) {
`;
exports[`compiler: v-memo transform > on v-for 1`] = `
"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, isMemoSame as _isMemoSame, withMemo as _withMemo } from \\"vue\\"
"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, isMemoSame as _isMemoSame, withMemo as _withMemo } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
const _memo = ([x, y === _ctx.z])
if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
const _item = (_openBlock(), _createElementBlock(\\"div\\", { key: x }, [
_createElementVNode(\\"span\\", null, \\"foobar\\")
const _item = (_openBlock(), _createElementBlock("div", { key: x }, [
_createElementVNode("span", null, "foobar")
]))
_item.memo = _memo
return _item
@ -65,16 +65,16 @@ export function render(_ctx, _cache) {
`;
exports[`compiler: v-memo transform > on v-if 1`] = `
"import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
(_ctx.ok)
? _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, [
_createElementVNode(\\"span\\", null, \\"foo\\"),
_createTextVNode(\\"bar\\")
? _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div", { key: 0 }, [
_createElementVNode("span", null, "foo"),
_createTextVNode("bar")
])), _cache, 0)
: _withMemo([_ctx.x], () => (_openBlock(), _createBlock(_component_Comp, { key: 1 })), _cache, 1)
]))

View File

@ -1,13 +1,13 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: transform v-model > compound expression (with prefixIdentifiers) 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", {
return (_openBlock(), _createElementBlock("input", {
modelValue: _ctx.model[_ctx.index],
\\"onUpdate:modelValue\\": $event => ((_ctx.model[_ctx.index]) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
"onUpdate:modelValue": $event => ((_ctx.model[_ctx.index]) = $event)
}, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}"
`;
@ -18,10 +18,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", {
return (_openBlock(), _createElementBlock("input", {
modelValue: model[index],
\\"onUpdate:modelValue\\": $event => ((model[index]) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
"onUpdate:modelValue": $event => ((model[index]) = $event)
}, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}
}"
`;
@ -33,30 +33,30 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", {
return (_openBlock(), _createElementBlock("input", {
modelValue:
model
.
foo
,
\\"onUpdate:modelValue\\": $event => ((
"onUpdate:modelValue": $event => ((
model
.
foo
) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
}, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}
}"
`;
exports[`compiler: transform v-model > simple expression (with prefixIdentifiers) 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", {
return (_openBlock(), _createElementBlock("input", {
modelValue: _ctx.model,
\\"onUpdate:modelValue\\": $event => ((_ctx.model) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
"onUpdate:modelValue": $event => ((_ctx.model) = $event)
}, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}"
`;
@ -67,10 +67,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", {
return (_openBlock(), _createElementBlock("input", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}
}"
`;
@ -82,21 +82,21 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", {
\\"foo-value\\": model,
\\"onUpdate:fooValue\\": $event => ((model) = $event)
}, null, 40 /* PROPS, NEED_HYDRATION */, [\\"foo-value\\", \\"onUpdate:fooValue\\"]))
return (_openBlock(), _createElementBlock("input", {
"foo-value": model,
"onUpdate:fooValue": $event => ((model) = $event)
}, null, 40 /* PROPS, NEED_HYDRATION */, ["foo-value", "onUpdate:fooValue"]))
}
}"
`;
exports[`compiler: transform v-model > with dynamic argument (with prefixIdentifiers) 1`] = `
"import { normalizeProps as _normalizeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { normalizeProps as _normalizeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
return (_openBlock(), _createElementBlock("input", _normalizeProps({
[_ctx.value]: _ctx.model,
[\\"onUpdate:\\" + _ctx.value]: $event => ((_ctx.model) = $event)
["onUpdate:" + _ctx.value]: $event => ((_ctx.model) = $event)
}), null, 16 /* FULL_PROPS */))
}"
`;
@ -108,9 +108,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { normalizeProps: _normalizeProps, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
return (_openBlock(), _createElementBlock("input", _normalizeProps({
[value]: model,
[\\"onUpdate:\\" + value]: $event => ((model) = $event)
["onUpdate:" + value]: $event => ((model) = $event)
}), null, 16 /* FULL_PROPS */))
}
}"

View File

@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
return _cache[0] || (
_setBlockTracking(-1),
_cache[0] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
_cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"]),
_setBlockTracking(1),
_cache[0]
)
@ -24,12 +24,12 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || (
_setBlockTracking(-1),
_cache[0] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
_cache[0] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, ["id"]),
_setBlockTracking(1),
_cache[0]
)
@ -45,10 +45,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || (
_setBlockTracking(-1),
_cache[0] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
_cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"]),
_setBlockTracking(1),
_cache[0]
)
@ -64,10 +64,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || (
_setBlockTracking(-1),
_cache[0] = _renderSlot($slots, \\"default\\"),
_cache[0] = _renderSlot($slots, "default"),
_setBlockTracking(1),
_cache[0]
)
@ -83,10 +83,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || (
_setBlockTracking(-1),
_cache[0] = _createElementVNode(\\"div\\"),
_cache[0] = _createElementVNode("div"),
_setBlockTracking(1),
_cache[0]
)

View File

@ -4,7 +4,7 @@ exports[`compiler: transform component slots > dynamically named slots 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
[_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@ -18,11 +18,11 @@ exports[`compiler: transform component slots > implicit default slot 1`] = `
"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(() => [
_createElementVNode(\\"div\\")
_createElementVNode("div")
]),
_: 1 /* STABLE */
}))
@ -33,7 +33,7 @@ exports[`compiler: transform component slots > named slot with v-for w/ prefixId
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
_renderList(_ctx.list, (name) => {
@ -50,14 +50,14 @@ exports[`compiler: transform component slots > named slot with v-if + prefixIden
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok)
? {
name: \\"one\\",
name: "one",
fn: _withCtx((props) => [_toDisplayString(props)]),
key: \\"0\\"
key: "0"
}
: undefined
]), 1024 /* DYNAMIC_SLOTS */))
@ -71,25 +71,25 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
ok
? {
name: \\"one\\",
fn: _withCtx(() => [\\"foo\\"]),
key: \\"0\\"
name: "one",
fn: _withCtx(() => ["foo"]),
key: "0"
}
: orNot
? {
name: \\"two\\",
fn: _withCtx((props) => [\\"bar\\"]),
key: \\"1\\"
name: "two",
fn: _withCtx((props) => ["bar"]),
key: "1"
}
: {
name: \\"one\\",
fn: _withCtx(() => [\\"baz\\"]),
key: \\"2\\"
name: "one",
fn: _withCtx(() => ["baz"]),
key: "2"
}
]), 1024 /* DYNAMIC_SLOTS */))
}
@ -103,14 +103,14 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
ok
? {
name: \\"one\\",
fn: _withCtx(() => [\\"hello\\"]),
key: \\"0\\"
name: "one",
fn: _withCtx(() => ["hello"]),
key: "0"
}
: undefined
]), 1024 /* DYNAMIC_SLOTS */))
@ -125,13 +125,13 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
one: _withCtx(() => [\\"foo\\"]),
one: _withCtx(() => ["foo"]),
default: _withCtx(() => [
\\"bar\\",
_createElementVNode(\\"span\\")
"bar",
_createElementVNode("span")
]),
_: 1 /* STABLE */
}))
@ -143,8 +143,8 @@ exports[`compiler: transform component slots > nested slots scoping 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Inner = _resolveComponent(\\"Inner\\")
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Inner = _resolveComponent("Inner")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(({ foo }) => [
@ -152,7 +152,7 @@ return function render(_ctx, _cache) {
default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]),
_: 2 /* DYNAMIC */
}, 1024 /* DYNAMIC_SLOTS */),
\\" \\",
" ",
_toDisplayString(foo),
_toDisplayString(_ctx.bar),
_toDisplayString(_ctx.baz)
@ -166,7 +166,7 @@ exports[`compiler: transform component slots > on component dynamically named sl
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
[_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@ -179,7 +179,7 @@ exports[`compiler: transform component slots > on component named slot 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
named: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@ -192,7 +192,7 @@ exports[`compiler: transform component slots > on-component default slot 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@ -205,7 +205,7 @@ exports[`compiler: transform component slots > template named slots 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@ -219,13 +219,13 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > imp
"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
header: _withCtx(() => [\\" Header \\"]),
header: _withCtx(() => [" Header "]),
default: _withCtx(() => [
\\" \\",
_createElementVNode(\\"p\\")
" ",
_createElementVNode("p")
]),
_: 1 /* STABLE */
}))
@ -236,11 +236,11 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > nam
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
header: _withCtx(() => [\\" Header \\"]),
default: _withCtx(() => [\\" Default \\"]),
header: _withCtx(() => [" Header "]),
default: _withCtx(() => [" Default "]),
_: 1 /* STABLE */
}))
}"
@ -250,11 +250,11 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > sho
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
header: _withCtx(() => [\\" Header \\"]),
footer: _withCtx(() => [\\" Footer \\"]),
header: _withCtx(() => [" Header "]),
footer: _withCtx(() => [" Footer "]),
_: 1 /* STABLE */
}))
}"

View File

@ -152,6 +152,28 @@ describe('compiler: element transform', () => {
expect(node.tag).toBe(`Foo.Example`)
})
test('resolve namespaced component from props bindings (inline)', () => {
const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
inline: true,
bindingMetadata: {
Foo: BindingTypes.PROPS
}
})
expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
expect(node.tag).toBe(`_unref(__props["Foo"]).Example`)
})
test('resolve namespaced component from props bindings (non-inline)', () => {
const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
inline: false,
bindingMetadata: {
Foo: BindingTypes.PROPS
}
})
expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
expect(node.tag).toBe('_unref($props["Foo"]).Example')
})
test('do not resolve component from non-script-setup bindings', () => {
const bindingMetadata = {
Example: BindingTypes.SETUP_MAYBE_REF
@ -1138,6 +1160,20 @@ describe('compiler: element transform', () => {
genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
)
})
test('should not have PROPS patchflag for constant v-on handlers', () => {
const { node } = parseWithElementTransform(`<div @keydown="foo" />`, {
prefixIdentifiers: true,
bindingMetadata: {
foo: BindingTypes.SETUP_CONST
},
directiveTransforms: {
on: transformOn
}
})
// should only have hydration flag
expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
})
})
describe('dynamic component', () => {

View File

@ -1,6 +1,6 @@
{
"name": "@vue/compiler-core",
"version": "3.4.0-alpha.3",
"version": "3.4.0-alpha.4",
"description": "@vue/compiler-core",
"main": "index.js",
"module": "dist/compiler-core.esm-bundler.js",
@ -32,13 +32,13 @@
},
"homepage": "https://github.com/vuejs/core-vapor/tree/main/packages/compiler-core#readme",
"dependencies": {
"@babel/parser": "^7.23.4",
"@babel/parser": "^7.23.5",
"@vue/shared": "workspace:*",
"entities": "^4.5.0",
"estree-walker": "^2.0.2",
"source-map-js": "^1.0.2"
},
"devDependencies": {
"@babel/types": "^7.23.4"
"@babel/types": "^7.23.5"
}
}

View File

@ -236,7 +236,7 @@ const tokenizer = new Tokenizer(stack, {
loc: getLoc(start)
}
if (name === 'pre') {
inVPre = true
inVPre = tokenizer.inVPre = true
currentVPreBoundary = currentOpenTag
// convert dirs before this one to attributes
const props = currentOpenTag!.props
@ -652,7 +652,7 @@ function onCloseTag(el: ElementNode, end: number, isImplied = false) {
inPre--
}
if (currentVPreBoundary === el) {
inVPre = false
inVPre = tokenizer.inVPre = false
currentVPreBoundary = null
}
if (

View File

@ -242,6 +242,8 @@ export default class Tokenizer {
public inRCDATA = false
/** For disabling RCDATA tags handling */
public inXML = false
/** For disabling interpolation parsing in v-pre */
public inVPre = false
/** Record newline positions for fast line / column calculation */
private newlines: number[] = []
@ -314,7 +316,7 @@ export default class Tokenizer {
this.sectionStart = this.index
} else if (!__BROWSER__ && c === CharCodes.Amp) {
this.startEntity()
} else if (c === this.delimiterOpen[0]) {
} else if (!this.inVPre && c === this.delimiterOpen[0]) {
this.state = State.InterpolationOpen
this.delimiterIndex = 0
this.stateInterpolationOpen(c)

View File

@ -19,7 +19,8 @@ import {
TemplateTextChildNode,
DirectiveArguments,
createVNodeCall,
ConstantTypes
ConstantTypes,
JSChildNode
} from '../ast'
import {
PatchFlags,
@ -370,6 +371,13 @@ function resolveSetupReference(name: string, context: TransformContext) {
`${context.helperString(UNREF)}(${fromMaybeRef})`
: `$setup[${JSON.stringify(fromMaybeRef)}]`
}
const fromProps = checkType(BindingTypes.PROPS)
if (fromProps) {
return `${context.helperString(UNREF)}(${
context.inline ? '__props' : '$props'
}[${JSON.stringify(fromProps)}])`
}
}
export type PropsExpression = ObjectExpression | CallExpression | ExpressionNode
@ -437,6 +445,12 @@ export function buildProps(
hasVnodeHook = true
}
if (isEventHandler && value.type === NodeTypes.JS_CALL_EXPRESSION) {
// handler wrapped with internal helper e.g. withModifiers(fn)
// extract the actual expression
value = value.arguments[0] as JSChildNode
}
if (
value.type === NodeTypes.JS_CACHE_EXPRESSION ||
((value.type === NodeTypes.SIMPLE_EXPRESSION ||

View File

@ -8,13 +8,13 @@ return function render(_ctx, _cache) {
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, normalizeStyle: _normalizeStyle, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
textContent: _toDisplayString(text)
}, null, 8 /* PROPS */, [\\"textContent\\"]),
_createElementVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
_createElementVNode(\\"div\\", null, \\"test\\"),
_createElementVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),
_createElementVNode(\\"div\\", {
}, null, 8 /* PROPS */, ["textContent"]),
_createElementVNode("div", { innerHTML: html }, null, 8 /* PROPS */, ["innerHTML"]),
_createElementVNode("div", null, "test"),
_createElementVNode("div", { style: {"color":"red"} }, "red"),
_createElementVNode("div", {
style: _normalizeStyle({color: 'green'})
}, null, 4 /* STYLE */)
], 64 /* STABLE_FRAGMENT */))

View File

@ -7,9 +7,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vShow: _vShow, createElementVNode: _createElementVNode, withDirectives: _withDirectives, Transition: _Transition, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(_Transition, { persisted: \\"\\" }, {
return (_openBlock(), _createBlock(_Transition, { persisted: "" }, {
default: _withCtx(() => [
_withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
_withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
[_vShow, ok]
])
]),
@ -29,15 +29,15 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Transition, null, {
default: _withCtx(() => [
a
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"hey\\"))
? (_openBlock(), _createElementBlock("div", { key: 0 }, "hey"))
: b
? (_openBlock(), _createElementBlock(\\"div\\", { key: 1 }, \\"hey\\"))
: (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }, [
? (_openBlock(), _createElementBlock("div", { key: 1 }, "hey"))
: (_openBlock(), _createElementBlock("div", { key: 2 }, [
c
? (_openBlock(), _createElementBlock(\\"p\\", { key: 0 }))
? (_openBlock(), _createElementBlock("p", { key: 0 }))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createCommentVNode(\\" this should not be ignored \\"),
_createElementVNode(\\"p\\")
_createCommentVNode(" this should not be ignored "),
_createElementVNode("p")
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
]))
]),

View File

@ -3,40 +3,40 @@
exports[`stringify static html > should bail on bindings that are hoisted but not stringifiable 1`] = `
"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"),
/*#__PURE__*/_createElementVNode(\\"img\\", { src: _imports_0_ })
const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, [
/*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
/*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
/*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
/*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
/*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
/*#__PURE__*/_createElementVNode("img", { src: _imports_0_ })
], -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
]
return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
}"
`;
exports[`stringify static html > should work with bindings that are non-static but stringifiable 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<div><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><img src=\\\\\\"\\" + _imports_0_ + \\"\\\\\\"></div>\\", 1)
const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<div><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><img src=\\"" + _imports_0_ + "\\"></div>", 1)
const _hoisted_2 = [
_hoisted_1
]
return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
}"
`;
exports[`stringify static html > stringify v-html 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>", 2)
return function render(_ctx, _cache) {
return _hoisted_1
@ -46,7 +46,7 @@ return function render(_ctx, _cache) {
exports[`stringify static html > stringify v-text 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>", 2)
return function render(_ctx, _cache) {
return _hoisted_1
@ -56,7 +56,7 @@ return function render(_ctx, _cache) {
exports[`stringify static html > stringify v-text with escape 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code>text1</code></pre><div class><span class>1</span><span class>2</span></div>\\", 2)
const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code>text1</code></pre><div class><span class>1</span><span class>2</span></div>", 2)
return function render(_ctx, _cache) {
return _hoisted_1

View File

@ -7,9 +7,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"my-input\\", {
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("my-input", {
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model]
])
}
@ -23,9 +23,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", _mergeProps(obj, {
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("input", _mergeProps(obj, {
"onUpdate:modelValue": $event => ((model) = $event)
}), null, 16 /* FULL_PROPS */, ["onUpdate:modelValue"])), [
[_vModelDynamic, model]
])
}
@ -39,9 +39,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("input", {
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelDynamic, model]
])
}
@ -55,9 +55,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("input", {
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[
_vModelText,
model,
@ -76,9 +76,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("input", {
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[
_vModelText,
model,
@ -97,9 +97,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("input", {
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[
_vModelText,
model,
@ -118,9 +118,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("input", {
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model]
])
}
@ -134,10 +134,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelCheckbox: _vModelCheckbox, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
type: \\"checkbox\\",
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("input", {
type: "checkbox",
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelCheckbox, model]
])
}
@ -151,9 +151,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("input", {
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelDynamic, model]
])
}
@ -167,10 +167,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelRadio: _vModelRadio, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
type: \\"radio\\",
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("input", {
type: "radio",
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelRadio, model]
])
}
@ -184,10 +184,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
type: \\"text\\",
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("input", {
type: "text",
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model]
])
}
@ -201,9 +201,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"select\\", {
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("select", {
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelSelect, model]
])
}
@ -217,9 +217,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"textarea\\", {
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
return _withDirectives((_openBlock(), _createElementBlock("textarea", {
"onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model]
])
}

View File

@ -7,7 +7,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vShow: _vShow, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
return _withDirectives((_openBlock(), _createElementBlock("div", null, null, 512 /* NEED_PATCH */)), [
[_vShow, a]
])
}

View File

@ -7,7 +7,8 @@ import {
NodeTypes,
ObjectExpression,
transform,
VNodeCall
VNodeCall,
BindingTypes
} from '@vue/compiler-core'
import { transformOn } from '../../src/transforms/vOn'
import { V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS } from '../../src/runtimeHelpers'
@ -25,12 +26,11 @@ function parseWithVOn(template: string, options: CompilerOptions = {}) {
},
...options
})
const node = (ast.children[0] as ElementNode).codegenNode as VNodeCall
return {
root: ast,
props: (
((ast.children[0] as ElementNode).codegenNode as VNodeCall)
.props as ObjectExpression
).properties
node,
props: (node.props as ObjectExpression).properties
}
}
@ -288,4 +288,18 @@ describe('compiler-dom: transform v-on', () => {
}
})
})
test('should not have PROPS patchFlag for constant v-on handlers with modifiers', () => {
const { node } = parseWithVOn(`<div @keydown.up="foo" />`, {
prefixIdentifiers: true,
bindingMetadata: {
foo: BindingTypes.SETUP_CONST
},
directiveTransforms: {
on: transformOn
}
})
// should only have hydration flag
expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
})
})

View File

@ -1,6 +1,6 @@
{
"name": "@vue/compiler-dom",
"version": "3.4.0-alpha.3",
"version": "3.4.0-alpha.4",
"description": "@vue/compiler-dom",
"main": "index.js",
"module": "dist/compiler-dom.esm-bundler.js",

View File

@ -49,7 +49,7 @@ return { a }
exports[`SFC compile <script setup> > <script> and <script setup> co-usage > export call expression as default 1`] = `
"
function fn() {
return \\"hello, world\\";
return "hello, world";
}
const __default__ = fn();
@ -127,7 +127,7 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > scr
import { x } from './x'
const __default__ = {
name: \\"test\\"
name: "test"
}
@ -880,7 +880,7 @@ export default {
__expose();
_useCssVars(_ctx => ({
\\"xxxxxxxx-msg\\": (msg.value)
"xxxxxxxx-msg": (msg.value)
}))
const msg = ref()
@ -960,7 +960,7 @@ return { ref }
exports[`SFC compile <script setup> > imports > should support module string names syntax 1`] = `
"
import { \\"😏\\" as foo } from './foo'
import { "😏" as foo } from './foo'
export default {
setup(__props, { expose: __expose }) {
@ -974,7 +974,7 @@ return { get foo() { return foo } }
`;
exports[`SFC compile <script setup> > inlineTemplate mode > avoid unref() when necessary 1`] = `
"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue'
import Foo, { bar } from './Foo.vue'
@ -998,8 +998,8 @@ return (_ctx, _cache) => {
]),
_: 1 /* STABLE */
}),
_createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */),
_createTextVNode(\\" \\" + _toDisplayString(tree.foo()), 1 /* TEXT */)
_createElementVNode("div", { onClick: fn }, _toDisplayString(count.value) + " " + _toDisplayString(constant) + " " + _toDisplayString(_unref(maybe)) + " " + _toDisplayString(_unref(lett)) + " " + _toDisplayString(_unref(other)), 1 /* TEXT */),
_createTextVNode(" " + _toDisplayString(tree.foo()), 1 /* TEXT */)
], 64 /* STABLE_FRAGMENT */))
}
}
@ -1008,7 +1008,7 @@ return (_ctx, _cache) => {
`;
exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components and directives 1`] = `
"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import ChildComp from './Child.vue'
import SomeOtherComp from './Other.vue'
@ -1020,7 +1020,7 @@ export default {
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
_withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
[_unref(vMyDir)]
]),
_createVNode(ChildComp),
@ -1033,9 +1033,9 @@ return (_ctx, _cache) => {
`;
exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */)
const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "static", -1 /* HOISTED */)
import { ref } from 'vue'
@ -1046,7 +1046,7 @@ export default {
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */),
_createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
_hoisted_1
], 64 /* STABLE_FRAGMENT */))
}
@ -1056,7 +1056,7 @@ return (_ctx, _cache) => {
`;
exports[`SFC compile <script setup> > inlineTemplate mode > ssr codegen 1`] = `
"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"vue/server-renderer\\"
"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "vue/server-renderer"
import { ref } from 'vue'
@ -1065,10 +1065,12 @@ export default {
setup(__props) {
const count = ref(0)
const style = { color: 'red' }
return (_ctx, _push, _parent, _attrs) => {
const _cssVars = { style: {
\\"--xxxxxxxx-count\\": (count.value)
"--xxxxxxxx-count": (count.value),
"--xxxxxxxx-style\\\\.color": (style.color)
}}
_push(\`<!--[--><div\${
_ssrRenderAttrs(_cssVars)
@ -1084,7 +1086,7 @@ return (_ctx, _push, _parent, _attrs) => {
`;
exports[`SFC compile <script setup> > inlineTemplate mode > template assignment expression codegen 1`] = `
"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue'
@ -1098,28 +1100,28 @@ export default {
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = $event => (count.value = 1))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[1] || (_cache[1] = $event => (maybe.value = count.value))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[3] || (_cache[3] = $event => (_isRef(v) ? v.value += 1 : v += 1))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[5] || (_cache[5] = () => {
let a = '' + _unref(lett)
_isRef(v) ? v.value = a : v = a
})
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[6] || (_cache[6] = () => {
// nested scopes
(()=>{
@ -1141,7 +1143,7 @@ return (_ctx, _cache) => {
`;
exports[`SFC compile <script setup> > inlineTemplate mode > template destructure assignment codegen 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue'
@ -1155,13 +1157,13 @@ export default {
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = $event => (({ count: count.value } = val)))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[1] || (_cache[1] = $event => ([maybe.value] = val))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[2] || (_cache[2] = $event => (({ lett: lett } = val)))
})
], 64 /* STABLE_FRAGMENT */))
@ -1172,7 +1174,7 @@ return (_ctx, _cache) => {
`;
exports[`SFC compile <script setup> > inlineTemplate mode > template update expression codegen 1`] = `
"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue'
@ -1185,22 +1187,22 @@ export default {
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = $event => (count.value++))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[1] || (_cache[1] = $event => (--count.value))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[2] || (_cache[2] = $event => (maybe.value++))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[3] || (_cache[3] = $event => (--maybe.value))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[4] || (_cache[4] = $event => (_isRef(lett) ? lett.value++ : lett++))
}),
_createElementVNode(\\"div\\", {
_createElementVNode("div", {
onClick: _cache[5] || (_cache[5] = $event => (_isRef(lett) ? --lett.value : --lett))
})
], 64 /* STABLE_FRAGMENT */))
@ -1211,7 +1213,7 @@ return (_ctx, _cache) => {
`;
exports[`SFC compile <script setup> > inlineTemplate mode > v-model codegen 1`] = `
"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue'
@ -1224,18 +1226,18 @@ export default {
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_withDirectives(_createElementVNode(\\"input\\", {
\\"onUpdate:modelValue\\": _cache[0] || (_cache[0] = $event => ((count).value = $event))
_withDirectives(_createElementVNode("input", {
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((count).value = $event))
}, null, 512 /* NEED_PATCH */), [
[_vModelText, count.value]
]),
_withDirectives(_createElementVNode(\\"input\\", {
\\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null))
_withDirectives(_createElementVNode("input", {
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null))
}, null, 512 /* NEED_PATCH */), [
[_vModelText, _unref(maybe)]
]),
_withDirectives(_createElementVNode(\\"input\\", {
\\"onUpdate:modelValue\\": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event))
_withDirectives(_createElementVNode("input", {
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event))
}, null, 512 /* NEED_PATCH */), [
[_vModelText, _unref(lett)]
])
@ -1365,9 +1367,9 @@ return { Foo }
exports[`SFC compile <script setup> > with TypeScript > runtime Enum in normal script 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export enum D { D = \\"D\\" }
const enum C { C = \\"C\\" }
enum B { B = \\"B\\" }
export enum D { D = "D" }
const enum C { C = "C" }
enum B { B = "B" }
export default /*#__PURE__*/_defineComponent({
setup(__props, { expose: __expose }) {
@ -1473,7 +1475,7 @@ exports[`SFC genDefaultAs > normal <script> w/ cssVars 1`] = `
import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({
\\"xxxxxxxx-x\\": (_ctx.x)
"xxxxxxxx-x": (_ctx.x)
}))}
const __setup__ = _sfc_.setup
_sfc_.setup = __setup__

View File

@ -1,10 +1,10 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`dynamic v-on + static v-on should merged 1`] = `
"import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", _mergeProps({
return (_openBlock(), _createElementBlock("input", _mergeProps({
onBlur: _cache[0] || (_cache[0] = (...args) => (_ctx.onBlur && _ctx.onBlur(...args)))
}, {
[_toHandlerKey(_ctx.validateEvent)]: _cache[1] || (_cache[1] = (...args) => (_ctx.onValidateEvent && _ctx.onValidateEvent(...args)))
@ -13,19 +13,19 @@ export function render(_ctx, _cache) {
`;
exports[`should not hoist srcset URLs in SSR mode 1`] = `
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
import _imports_0 from './img/foo.svg'
import _imports_1 from './img/bar.svg'
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_router_link = _resolveComponent(\\"router-link\\")
const _component_router_link = _resolveComponent("router-link")
_push(\`<!--[--><picture><source\${
_ssrRenderAttr(\\"srcset\\", _imports_0)
_ssrRenderAttr("srcset", _imports_0)
}><img\${
_ssrRenderAttr(\\"src\\", _imports_0)
_ssrRenderAttr("src", _imports_0)
}></picture>\`)
_push(_ssrRenderComponent(_component_router_link, null, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -33,21 +33,21 @@ export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<picture\${
_scopeId
}><source\${
_ssrRenderAttr(\\"srcset\\", _imports_1)
_ssrRenderAttr("srcset", _imports_1)
}\${
_scopeId
}><img\${
_ssrRenderAttr(\\"src\\", _imports_1)
_ssrRenderAttr("src", _imports_1)
}\${
_scopeId
}></picture>\`)
} else {
return [
_createVNode(\\"picture\\", null, [
_createVNode(\\"source\\", {
_createVNode("picture", null, [
_createVNode("source", {
srcset: _imports_1
}),
_createVNode(\\"img\\", { src: _imports_1 })
_createVNode("img", { src: _imports_1 })
])
]
}

View File

@ -5,7 +5,7 @@ exports[`CSS vars injection > codegen > <script> w/ default export 1`] = `
import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (_ctx.color)
"xxxxxxxx-color": (_ctx.color)
}))}
const __setup__ = __default__.setup
__default__.setup = __setup__
@ -23,7 +23,7 @@ exports[`CSS vars injection > codegen > <script> w/ default export in strings/co
import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (_ctx.color)
"xxxxxxxx-color": (_ctx.color)
}))}
const __setup__ = __default__.setup
__default__.setup = __setup__
@ -39,7 +39,7 @@ const __default__ = {}
import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (_ctx.color)
"xxxxxxxx-color": (_ctx.color)
}))}
const __setup__ = __default__.setup
__default__.setup = __setup__
@ -57,7 +57,7 @@ export default {
__expose();
_useCssVars(_ctx => ({
\\"xxxxxxxx-width\\": (width)
"xxxxxxxx-width": (width)
}))
return { color, width }
@ -74,10 +74,10 @@ export default {
__expose();
_useCssVars(_ctx => ({
\\"xxxxxxxx-foo\\": (_unref(foo)),
\\"xxxxxxxx-foo\\\\ \\\\+\\\\ \\\\'px\\\\'\\": (_unref(foo) + 'px'),
\\"xxxxxxxx-\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\ \\\\/\\\\ 2\\\\ \\\\+\\\\ \\\\'px\\\\'\\": ((_unref(a) + _unref(b)) / 2 + 'px'),
\\"xxxxxxxx-\\\\(\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\)\\\\ \\\\/\\\\ \\\\(2\\\\ \\\\*\\\\ a\\\\)\\": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
"xxxxxxxx-foo": (_unref(foo)),
"xxxxxxxx-foo\\ \\+\\ \\'px\\'": (_unref(foo) + 'px'),
"xxxxxxxx-\\(a\\ \\+\\ b\\)\\ \\/\\ 2\\ \\+\\ \\'px\\'": ((_unref(a) + _unref(b)) / 2 + 'px'),
"xxxxxxxx-\\(\\(a\\ \\+\\ b\\)\\)\\ \\/\\ \\(2\\ \\*\\ a\\)": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
}))
let a = 100
@ -98,7 +98,7 @@ export default {
__expose();
_useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (color)
"xxxxxxxx-color": (color)
}))
return { color }
@ -116,7 +116,7 @@ export default {
__expose();
_useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (color)
"xxxxxxxx-color": (color)
}))
@ -132,8 +132,8 @@ const __default__ = {}
import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (_ctx.color),
\\"xxxxxxxx-font\\\\.size\\": (_ctx.font.size)
"xxxxxxxx-color": (_ctx.color),
"xxxxxxxx-font\\.size": (_ctx.font.size)
}))}
const __setup__ = __default__.setup
__default__.setup = __setup__
@ -156,9 +156,9 @@ export default {
__expose();
_useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (color),
\\"xxxxxxxx-size\\": (size.value),
\\"xxxxxxxx-foo\\": (__props.foo)
"xxxxxxxx-color": (color),
"xxxxxxxx-size": (size.value),
"xxxxxxxx-foo": (__props.foo)
}))
const size = ref('10px')
@ -183,7 +183,7 @@ exports[`CSS vars injection > w/ normal <script> binding analysis 1`] = `
import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({
\\"xxxxxxxx-size\\": (_ctx.size)
"xxxxxxxx-size": (_ctx.size)
}))}
const __setup__ = __default__.setup
__default__.setup = __setup__

View File

@ -1,45 +1,45 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler sfc: transform asset url > should allow for full base URLs, with paths 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/src/logo.png\\" }))
return (_openBlock(), _createElementBlock("img", { src: "http://localhost:3000/src/logo.png" }))
}"
`;
exports[`compiler sfc: transform asset url > should allow for full base URLs, without paths 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/logo.png\\" }))
return (_openBlock(), _createElementBlock("img", { src: "http://localhost:3000/logo.png" }))
}"
`;
exports[`compiler sfc: transform asset url > should allow for full base URLs, without port 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost/logo.png\\" }))
return (_openBlock(), _createElementBlock("img", { src: "http://localhost/logo.png" }))
}"
`;
exports[`compiler sfc: transform asset url > should allow for full base URLs, without protocol 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"//localhost/logo.png\\" }))
return (_openBlock(), _createElementBlock("img", { src: "//localhost/logo.png" }))
}"
`;
exports[`compiler sfc: transform asset url > support uri fragment 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from '@svg/file.svg'
const _hoisted_1 = _imports_0 + '#fragment'
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"use\\", { href: _hoisted_1 }, null, -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"use\\", { href: _hoisted_1 }, null, -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
@ -50,76 +50,76 @@ export function render(_ctx, _cache) {
`;
exports[`compiler sfc: transform asset url > support uri is empty 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"use\\", { href: '' }))
return (_openBlock(), _createElementBlock("use", { href: '' }))
}"
`;
exports[`compiler sfc: transform asset url > transform assetUrls 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './logo.png'
import _imports_1 from 'fixtures/logo.png'
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"img\\", { src: _imports_0 }),
_createElementVNode(\\"img\\", { src: _imports_1 }),
_createElementVNode(\\"img\\", { src: _imports_1 }),
_createElementVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }),
_createElementVNode(\\"img\\", { src: \\"//example.com/fixtures/logo.png\\" }),
_createElementVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }),
_createElementVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" })
_createElementVNode("img", { src: _imports_0 }),
_createElementVNode("img", { src: _imports_1 }),
_createElementVNode("img", { src: _imports_1 }),
_createElementVNode("img", { src: "http://example.com/fixtures/logo.png" }),
_createElementVNode("img", { src: "//example.com/fixtures/logo.png" }),
_createElementVNode("img", { src: "/fixtures/logo.png" }),
_createElementVNode("img", { src: "data:image/png;base64,i" })
], 64 /* STABLE_FRAGMENT */))
}"
`;
exports[`compiler sfc: transform asset url > transform with stringify 1`] = `
"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './bar.png'
import _imports_1 from '/bar.png'
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<img src=\\\\\\"\\" + _imports_0 + \\"\\\\\\"><img src=\\\\\\"\\" + _imports_1 + \\"\\\\\\"><img src=\\\\\\"https://foo.bar/baz.png\\\\\\"><img src=\\\\\\"//foo.bar/baz.png\\\\\\"><img src=\\\\\\"\\" + _imports_0 + \\"\\\\\\">\\", 5)
const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\">", 5)
const _hoisted_6 = [
_hoisted_1
]
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_6))
return (_openBlock(), _createElementBlock("div", null, _hoisted_6))
}"
`;
exports[`compiler sfc: transform asset url > with explicit base 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from 'bar.png'
import _imports_1 from '@theme/bar.png'
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"img\\", { src: \\"/foo/bar.png\\" }),
_createElementVNode(\\"img\\", { src: \\"bar.png\\" }),
_createElementVNode(\\"img\\", { src: _imports_0 }),
_createElementVNode(\\"img\\", { src: _imports_1 })
_createElementVNode("img", { src: "/foo/bar.png" }),
_createElementVNode("img", { src: "bar.png" }),
_createElementVNode("img", { src: _imports_0 }),
_createElementVNode("img", { src: _imports_1 })
], 64 /* STABLE_FRAGMENT */))
}"
`;
exports[`compiler sfc: transform asset url > with includeAbsolute: true 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './bar.png'
import _imports_1 from '/bar.png'
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"img\\", { src: _imports_0 }),
_createElementVNode(\\"img\\", { src: _imports_1 }),
_createElementVNode(\\"img\\", { src: \\"https://foo.bar/baz.png\\" }),
_createElementVNode(\\"img\\", { src: \\"//foo.bar/baz.png\\" })
_createElementVNode("img", { src: _imports_0 }),
_createElementVNode("img", { src: _imports_1 }),
_createElementVNode("img", { src: "https://foo.bar/baz.png" }),
_createElementVNode("img", { src: "//foo.bar/baz.png" })
], 64 /* STABLE_FRAGMENT */))
}"
`;

View File

@ -1,14 +1,14 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler sfc: transform srcset > srcset w/ explicit base option 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from '@/logo.png'
const _hoisted_1 = _imports_0 + ', ' + _imports_0 + ' 2x'
const _hoisted_2 = _imports_0 + ' 1x, ' + \\"/foo/logo.png\\" + ' 2x'
const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"img\\", { srcset: _hoisted_1 }, null, -1 /* HOISTED */)
const _hoisted_4 = /*#__PURE__*/_createElementVNode(\\"img\\", { srcset: _hoisted_2 }, null, -1 /* HOISTED */)
const _hoisted_2 = _imports_0 + ' 1x, ' + "/foo/logo.png" + ' 2x'
const _hoisted_3 = /*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_1 }, null, -1 /* HOISTED */)
const _hoisted_4 = /*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_2 }, null, -1 /* HOISTED */)
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
@ -19,7 +19,7 @@ export function render(_ctx, _cache) {
`;
exports[`compiler sfc: transform srcset > transform srcset 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './logo.png'
@ -30,54 +30,54 @@ const _hoisted_4 = _imports_0 + ', ' + _imports_0 + ' 2x'
const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + ' 2x'
const _hoisted_9 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"\\"
const _hoisted_8 = "/logo.png" + ', ' + _imports_0 + ' 2x'
const _hoisted_9 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: ""
}, null, -1 /* HOISTED */)
const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_1
}, null, -1 /* HOISTED */)
const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_2
}, null, -1 /* HOISTED */)
const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_3
}, null, -1 /* HOISTED */)
const _hoisted_13 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_13 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_4
}, null, -1 /* HOISTED */)
const _hoisted_14 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_14 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_5
}, null, -1 /* HOISTED */)
const _hoisted_15 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_15 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_6
}, null, -1 /* HOISTED */)
const _hoisted_16 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_16 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_7
}, null, -1 /* HOISTED */)
const _hoisted_17 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"/logo.png\\",
srcset: \\"/logo.png, /logo.png 2x\\"
const _hoisted_17 = /*#__PURE__*/_createElementVNode("img", {
src: "/logo.png",
srcset: "/logo.png, /logo.png 2x"
}, null, -1 /* HOISTED */)
const _hoisted_18 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"https://example.com/logo.png\\",
srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
const _hoisted_18 = /*#__PURE__*/_createElementVNode("img", {
src: "https://example.com/logo.png",
srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
}, null, -1 /* HOISTED */)
const _hoisted_19 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"/logo.png\\",
const _hoisted_19 = /*#__PURE__*/_createElementVNode("img", {
src: "/logo.png",
srcset: _hoisted_8
}, null, -1 /* HOISTED */)
const _hoisted_20 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"data:image/png;base64,i\\",
srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
const _hoisted_20 = /*#__PURE__*/_createElementVNode("img", {
src: "data:image/png;base64,i",
srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
}, null, -1 /* HOISTED */)
export function render(_ctx, _cache) {
@ -99,55 +99,55 @@ export function render(_ctx, _cache) {
`;
exports[`compiler sfc: transform srcset > transform srcset w/ base 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"\\"
const _hoisted_1 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: ""
}, null, -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png\\"
const _hoisted_2 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: "/foo/logo.png"
}, null, -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x\\"
const _hoisted_3 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: "/foo/logo.png 2x"
}, null, -1 /* HOISTED */)
const _hoisted_4 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x\\"
const _hoisted_4 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: "/foo/logo.png 2x"
}, null, -1 /* HOISTED */)
const _hoisted_5 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png, /foo/logo.png 2x\\"
const _hoisted_5 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: "/foo/logo.png, /foo/logo.png 2x"
}, null, -1 /* HOISTED */)
const _hoisted_6 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x, /foo/logo.png\\"
const _hoisted_6 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: "/foo/logo.png 2x, /foo/logo.png"
}, null, -1 /* HOISTED */)
const _hoisted_7 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x, /foo/logo.png 3x\\"
const _hoisted_7 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: "/foo/logo.png 2x, /foo/logo.png 3x"
}, null, -1 /* HOISTED */)
const _hoisted_8 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\"
const _hoisted_8 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: "/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x"
}, null, -1 /* HOISTED */)
const _hoisted_9 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"/logo.png\\",
srcset: \\"/logo.png, /logo.png 2x\\"
const _hoisted_9 = /*#__PURE__*/_createElementVNode("img", {
src: "/logo.png",
srcset: "/logo.png, /logo.png 2x"
}, null, -1 /* HOISTED */)
const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"https://example.com/logo.png\\",
srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
src: "https://example.com/logo.png",
srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
}, null, -1 /* HOISTED */)
const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"/logo.png\\",
srcset: \\"/logo.png, /foo/logo.png 2x\\"
const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
src: "/logo.png",
srcset: "/logo.png, /foo/logo.png 2x"
}, null, -1 /* HOISTED */)
const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"data:image/png;base64,i\\",
srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
src: "data:image/png;base64,i",
srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
}, null, -1 /* HOISTED */)
export function render(_ctx, _cache) {
@ -169,7 +169,7 @@ export function render(_ctx, _cache) {
`;
exports[`compiler sfc: transform srcset > transform srcset w/ includeAbsolute: true 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './logo.png'
import _imports_1 from '/logo.png'
@ -183,53 +183,53 @@ const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
srcset: \\"\\"
const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: ""
}, null, -1 /* HOISTED */)
const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_1
}, null, -1 /* HOISTED */)
const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_2
}, null, -1 /* HOISTED */)
const _hoisted_13 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_13 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_3
}, null, -1 /* HOISTED */)
const _hoisted_14 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_14 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_4
}, null, -1 /* HOISTED */)
const _hoisted_15 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_15 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_5
}, null, -1 /* HOISTED */)
const _hoisted_16 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_16 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_6
}, null, -1 /* HOISTED */)
const _hoisted_17 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"./logo.png\\",
const _hoisted_17 = /*#__PURE__*/_createElementVNode("img", {
src: "./logo.png",
srcset: _hoisted_7
}, null, -1 /* HOISTED */)
const _hoisted_18 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"/logo.png\\",
const _hoisted_18 = /*#__PURE__*/_createElementVNode("img", {
src: "/logo.png",
srcset: _hoisted_8
}, null, -1 /* HOISTED */)
const _hoisted_19 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"https://example.com/logo.png\\",
srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
const _hoisted_19 = /*#__PURE__*/_createElementVNode("img", {
src: "https://example.com/logo.png",
srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
}, null, -1 /* HOISTED */)
const _hoisted_20 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"/logo.png\\",
const _hoisted_20 = /*#__PURE__*/_createElementVNode("img", {
src: "/logo.png",
srcset: _hoisted_9
}, null, -1 /* HOISTED */)
const _hoisted_21 = /*#__PURE__*/_createElementVNode(\\"img\\", {
src: \\"data:image/png;base64,i\\",
srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
const _hoisted_21 = /*#__PURE__*/_createElementVNode("img", {
src: "data:image/png;base64,i",
srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
}, null, -1 /* HOISTED */)
export function render(_ctx, _cache) {
@ -251,7 +251,7 @@ export function render(_ctx, _cache) {
`;
exports[`compiler sfc: transform srcset > transform srcset w/ stringify 1`] = `
"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './logo.png'
import _imports_1 from '/logo.png'
@ -265,12 +265,12 @@ const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
const _hoisted_10 = /*#__PURE__*/_createStaticVNode(\\"<img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_1 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_2 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_3 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_4 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_5 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_6 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_7 + \\"\\\\\\"><img src=\\\\\\"/logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_8 + \\"\\\\\\"><img src=\\\\\\"https://example.com/logo.png\\\\\\" srcset=\\\\\\"https://example.com/logo.png, https://example.com/logo.png 2x\\\\\\"><img src=\\\\\\"/logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_9 + \\"\\\\\\"><img src=\\\\\\"data:image/png;base64,i\\\\\\" srcset=\\\\\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\\\\\">\\", 12)
const _hoisted_10 = /*#__PURE__*/_createStaticVNode("<img src=\\"./logo.png\\" srcset=\\"\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_1 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_2 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_3 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_4 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_5 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_6 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_7 + "\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_8 + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_9 + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", 12)
const _hoisted_22 = [
_hoisted_10
]
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_22))
return (_openBlock(), _createElementBlock("div", null, _hoisted_22))
}"
`;

View File

@ -826,6 +826,7 @@ describe('SFC compile <script setup>', () => {
<script setup>
import { ref } from 'vue'
const count = ref(0)
const style = { color: 'red' }
</script>
<template>
<div>{{ count }}</div>
@ -833,6 +834,7 @@ describe('SFC compile <script setup>', () => {
</template>
<style>
div { color: v-bind(count) }
span { color: v-bind(style.color) }
</style>
`,
{
@ -847,6 +849,7 @@ describe('SFC compile <script setup>', () => {
expect(content).toMatch(`ssrInterpolate`)
expect(content).not.toMatch(`useCssVars`)
expect(content).toMatch(`"--${mockId}-count": (count.value)`)
expect(content).toMatch(`"--${mockId}-style\\\\.color": (style.color)`)
assertCode(content)
})

View File

@ -36,7 +36,7 @@ exports[`defineEmits > w/ type (exported interface) 1`] = `
export interface Emits { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"],
emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -53,7 +53,7 @@ exports[`defineEmits > w/ type (exported type alias) 1`] = `
export type Emits = { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"],
emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -88,7 +88,7 @@ interface Base { (e: 'foo'): void }
interface Emits extends Base { (e: 'bar'): void }
export default /*#__PURE__*/_defineComponent({
emits: [\\"bar\\", \\"foo\\"],
emits: ["bar", "foo"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -105,7 +105,7 @@ exports[`defineEmits > w/ type (interface) 1`] = `
interface Emits { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"],
emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -121,7 +121,7 @@ exports[`defineEmits > w/ type (property syntax string literal) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo:bar\\"],
emits: ["foo:bar"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -137,7 +137,7 @@ exports[`defineEmits > w/ type (property syntax) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"],
emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -154,7 +154,7 @@ exports[`defineEmits > w/ type (referenced exported function type) 1`] = `
export type Emits = (e: 'foo' | 'bar') => void
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"],
emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -171,7 +171,7 @@ exports[`defineEmits > w/ type (referenced function type) 1`] = `
type Emits = (e: 'foo' | 'bar') => void
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"],
emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -188,7 +188,7 @@ exports[`defineEmits > w/ type (type alias) 1`] = `
type Emits = { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"],
emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -204,7 +204,7 @@ exports[`defineEmits > w/ type (type literal w/ call signatures) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\", \\"baz\\"],
emits: ["foo", "bar", "baz"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -218,11 +218,11 @@ return { emit }
exports[`defineEmits > w/ type (type references in union) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
type BaseEmit = \\"change\\"
type Emit = \\"some\\" | \\"emit\\" | BaseEmit
type BaseEmit = "change"
type Emit = "some" | "emit" | BaseEmit
export default /*#__PURE__*/_defineComponent({
emits: [\\"some\\", \\"emit\\", \\"change\\", \\"another\\"],
emits: ["some", "emit", "change", "another"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -238,7 +238,7 @@ exports[`defineEmits > w/ type (union) 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\", \\"baz\\"],
emits: ["foo", "bar", "baz"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -254,7 +254,7 @@ exports[`defineEmits > w/ type 1`] = `
"import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"],
emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();
@ -272,7 +272,7 @@ exports[`defineEmits > w/ type from normal script 1`] = `
export interface Emits { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"],
emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) {
__expose();

View File

@ -5,17 +5,17 @@ exports[`defineModel() > basic usage 1`] = `
export default {
props: {
\\"modelValue\\": { required: true },
\\"count\\": {},
\\"toString\\": { type: Function },
"modelValue": { required: true },
"count": {},
"toString": { type: Function },
},
emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:toString\\"],
emits: ["update:modelValue", "update:count", "update:toString"],
setup(__props, { expose: __expose }) {
__expose();
const modelValue = _useModel(__props, \\"modelValue\\")
const c = _useModel(__props, \\"count\\")
const toString = _useModel(__props, \\"toString\\")
const modelValue = _useModel(__props, "modelValue")
const c = _useModel(__props, "count")
const toString = _useModel(__props, "toString")
return { modelValue, c, toString }
}
@ -27,15 +27,15 @@ exports[`defineModel() > w/ array props 1`] = `
"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
export default {
props: _mergeModels(['foo', 'bar'], {
\\"count\\": {},
props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
"count": {},
}),
emits: [\\"update:count\\"],
emits: ["update:count"],
setup(__props, { expose: __expose }) {
__expose();
const count = _useModel(__props, \\"count\\")
const count = _useModel(__props, "count")
return { count }
}
@ -47,16 +47,16 @@ exports[`defineModel() > w/ defineProps and defineEmits 1`] = `
"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
export default {
props: _mergeModels({ foo: String }, {
\\"modelValue\\": { default: 0 },
props: /*#__PURE__*/_mergeModels({ foo: String }, {
"modelValue": { default: 0 },
}),
emits: _mergeModels(['change'], [\\"update:modelValue\\"]),
emits: /*#__PURE__*/_mergeModels(['change'], ["update:modelValue"]),
setup(__props, { expose: __expose }) {
__expose();
const count = _useModel(__props, \\"modelValue\\")
const count = _useModel(__props, "modelValue")
return { count }
}
@ -70,25 +70,25 @@ const local = true
export default {
props: {
\\"modelValue\\": { local: true, default: 1 },
\\"bar\\": { [key]: true },
\\"baz\\": { ...x },
\\"qux\\": x,
\\"foo2\\": { local: true, ...x },
\\"hoist\\": { local },
"modelValue": { local: true, default: 1 },
"bar": { [key]: true },
"baz": { ...x },
"qux": x,
"foo2": { local: true, ...x },
"hoist": { local },
},
emits: [\\"update:modelValue\\", \\"update:bar\\", \\"update:baz\\", \\"update:qux\\", \\"update:foo2\\", \\"update:hoist\\"],
emits: ["update:modelValue", "update:bar", "update:baz", "update:qux", "update:foo2", "update:hoist"],
setup(__props, { expose: __expose }) {
__expose();
const foo = _useModel(__props, \\"modelValue\\", { local: true })
const bar = _useModel(__props, \\"bar\\", { [key]: true })
const baz = _useModel(__props, \\"baz\\", { ...x })
const qux = _useModel(__props, \\"qux\\", x)
const foo = _useModel(__props, "modelValue", { local: true })
const bar = _useModel(__props, "bar", { [key]: true })
const baz = _useModel(__props, "baz", { ...x })
const qux = _useModel(__props, "qux", x)
const foo2 = _useModel(__props, \\"foo2\\", { local: true })
const foo2 = _useModel(__props, "foo2", { local: true })
const hoist = _useModel(__props, \\"hoist\\", { local })
const hoist = _useModel(__props, "hoist", { local })
return { foo, bar, baz, qux, foo2, local, hoist }
}
@ -101,19 +101,19 @@ exports[`defineModel() > w/ types, basic usage 1`] = `
export default /*#__PURE__*/_defineComponent({
props: {
\\"modelValue\\": { type: [Boolean, String] },
\\"count\\": { type: Number },
\\"disabled\\": { type: Number, ...{ required: false } },
\\"any\\": { type: Boolean, skipCheck: true },
"modelValue": { type: [Boolean, String] },
"count": { type: Number },
"disabled": { type: Number, ...{ required: false } },
"any": { type: Boolean, skipCheck: true },
},
emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\", \\"update:any\\"],
emits: ["update:modelValue", "update:count", "update:disabled", "update:any"],
setup(__props, { expose: __expose }) {
__expose();
const modelValue = _useModel(__props, \\"modelValue\\")
const count = _useModel(__props, \\"count\\")
const disabled = _useModel(__props, \\"disabled\\")
const any = _useModel(__props, \\"any\\")
const modelValue = _useModel(__props, "modelValue")
const count = _useModel(__props, "count")
const disabled = _useModel(__props, "disabled")
const any = _useModel(__props, "any")
return { modelValue, count, disabled, any }
}
@ -126,21 +126,21 @@ exports[`defineModel() > w/ types, production mode 1`] = `
export default /*#__PURE__*/_defineComponent({
props: {
\\"modelValue\\": { type: Boolean },
\\"fn\\": {},
\\"fnWithDefault\\": { type: Function, ...{ default: () => null } },
\\"str\\": {},
\\"optional\\": { required: false },
"modelValue": { type: Boolean },
"fn": {},
"fnWithDefault": { type: Function, ...{ default: () => null } },
"str": {},
"optional": { required: false },
},
emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:fnWithDefault\\", \\"update:str\\", \\"update:optional\\"],
emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"],
setup(__props, { expose: __expose }) {
__expose();
const modelValue = _useModel(__props, \\"modelValue\\")
const fn = _useModel(__props, \\"fn\\")
const fnWithDefault = _useModel(__props, \\"fnWithDefault\\")
const str = _useModel(__props, \\"str\\")
const optional = _useModel(__props, \\"optional\\")
const modelValue = _useModel(__props, "modelValue")
const fn = _useModel(__props, "fn")
const fnWithDefault = _useModel(__props, "fnWithDefault")
const str = _useModel(__props, "str")
const optional = _useModel(__props, "optional")
return { modelValue, fn, fnWithDefault, str, optional }
}

View File

@ -57,34 +57,34 @@ exports[`defineProps > should escape names w/ special symbols 1`] = `
export default /*#__PURE__*/_defineComponent({
props: {
\\"spa ce\\": { type: null, required: true },
\\"exclamation!mark\\": { type: null, required: true },
\\"double\\\\\\"quote\\": { type: null, required: true },
\\"hash#tag\\": { type: null, required: true },
\\"dollar$sign\\": { type: null, required: true },
\\"percentage%sign\\": { type: null, required: true },
\\"amper&sand\\": { type: null, required: true },
\\"single'quote\\": { type: null, required: true },
\\"round(brack)ets\\": { type: null, required: true },
\\"aste*risk\\": { type: null, required: true },
\\"pl+us\\": { type: null, required: true },
\\"com,ma\\": { type: null, required: true },
\\"do.t\\": { type: null, required: true },
\\"sla/sh\\": { type: null, required: true },
\\"co:lon\\": { type: null, required: true },
\\"semi;colon\\": { type: null, required: true },
\\"angle<brack>ets\\": { type: null, required: true },
\\"equal=sign\\": { type: null, required: true },
\\"question?mark\\": { type: null, required: true },
\\"at@sign\\": { type: null, required: true },
\\"square[brack]ets\\": { type: null, required: true },
\\"back\\\\\\\\slash\\": { type: null, required: true },
\\"ca^ret\\": { type: null, required: true },
\\"back\`tick\\": { type: null, required: true },
\\"curly{bra}ces\\": { type: null, required: true },
\\"pi|pe\\": { type: null, required: true },
\\"til~de\\": { type: null, required: true },
\\"da-sh\\": { type: null, required: true }
"spa ce": { type: null, required: true },
"exclamation!mark": { type: null, required: true },
"double\\"quote": { type: null, required: true },
"hash#tag": { type: null, required: true },
"dollar$sign": { type: null, required: true },
"percentage%sign": { type: null, required: true },
"amper&sand": { type: null, required: true },
"single'quote": { type: null, required: true },
"round(brack)ets": { type: null, required: true },
"aste*risk": { type: null, required: true },
"pl+us": { type: null, required: true },
"com,ma": { type: null, required: true },
"do.t": { type: null, required: true },
"sla/sh": { type: null, required: true },
"co:lon": { type: null, required: true },
"semi;colon": { type: null, required: true },
"angle<brack>ets": { type: null, required: true },
"equal=sign": { type: null, required: true },
"question?mark": { type: null, required: true },
"at@sign": { type: null, required: true },
"square[brack]ets": { type: null, required: true },
"back\\\\slash": { type: null, required: true },
"ca^ret": { type: null, required: true },
"back\`tick": { type: null, required: true },
"curly{bra}ces": { type: null, required: true },
"pi|pe": { type: null, required: true },
"til~de": { type: null, required: true },
"da-sh": { type: null, required: true }
},
setup(__props: any, { expose: __expose }) {
__expose();
@ -332,7 +332,7 @@ exports[`defineProps > withDefaults (dynamic) 1`] = `
import { defaults } from './foo'
export default /*#__PURE__*/_defineComponent({
props: _mergeDefaults({
props: /*#__PURE__*/_mergeDefaults({
foo: { type: String, required: false },
bar: { type: Number, required: false },
baz: { type: Boolean, required: true }
@ -353,7 +353,7 @@ exports[`defineProps > withDefaults (dynamic) w/ production mode 1`] = `
import { defaults } from './foo'
export default /*#__PURE__*/_defineComponent({
props: _mergeDefaults({
props: /*#__PURE__*/_mergeDefaults({
foo: { type: Function },
bar: { type: Boolean },
baz: { type: [Boolean, Function] },
@ -375,7 +375,7 @@ exports[`defineProps > withDefaults (reference) 1`] = `
import { defaults } from './foo'
export default /*#__PURE__*/_defineComponent({
props: _mergeDefaults({
props: /*#__PURE__*/_mergeDefaults({
foo: { type: String, required: false },
bar: { type: Number, required: false },
baz: { type: Boolean, required: true }
@ -400,7 +400,7 @@ exports[`defineProps > withDefaults (static) + normal script 1`] = `
export default /*#__PURE__*/_defineComponent({
props: {
a: { type: String, required: false, default: \\"a\\" }
a: { type: String, required: false, default: "a" }
},
setup(__props: any, { expose: __expose }) {
__expose();
@ -462,7 +462,7 @@ exports[`defineProps > withDefaults w/ dynamic object method 1`] = `
"import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({
props: _mergeDefaults({
props: /*#__PURE__*/_mergeDefaults({
foo: { type: Function, required: false }
}, {
['fo' + 'o']() { return 'foo' }

View File

@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`sfc reactive props destructure > aliasing 1`] = `
"import { toDisplayString as _toDisplayString } from \\"vue\\"
"import { toDisplayString as _toDisplayString } from "vue"
export default {
@ -21,7 +21,7 @@ return (_ctx, _cache) => {
`;
exports[`sfc reactive props destructure > basic usage 1`] = `
"import { toDisplayString as _toDisplayString } from \\"vue\\"
"import { toDisplayString as _toDisplayString } from "vue"
export default {
@ -40,7 +40,7 @@ return (_ctx, _cache) => {
`;
exports[`sfc reactive props destructure > computed static key 1`] = `
"import { toDisplayString as _toDisplayString } from \\"vue\\"
"import { toDisplayString as _toDisplayString } from "vue"
export default {
@ -62,7 +62,7 @@ exports[`sfc reactive props destructure > default values w/ array runtime declar
"import { mergeDefaults as _mergeDefaults } from 'vue'
export default {
props: _mergeDefaults(['foo', 'bar', 'baz'], {
props: /*#__PURE__*/_mergeDefaults(['foo', 'bar', 'baz'], {
foo: 1,
bar: () => ({}),
func: () => {}, __skip_func: true
@ -81,7 +81,7 @@ exports[`sfc reactive props destructure > default values w/ object runtime decla
"import { mergeDefaults as _mergeDefaults } from 'vue'
export default {
props: _mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
props: /*#__PURE__*/_mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
foo: 1,
bar: () => ({}),
func: () => {}, __skip_func: true,
@ -101,9 +101,9 @@ exports[`sfc reactive props destructure > default values w/ runtime declaration
"import { mergeDefaults as _mergeDefaults } from 'vue'
export default {
props: _mergeDefaults(['foo', 'foo:bar'], {
props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
foo: 1,
\\"foo:bar\\": 'foo-bar'
"foo:bar": 'foo-bar'
}),
setup(__props) {
@ -122,8 +122,8 @@ export default /*#__PURE__*/_defineComponent({
props: {
foo: { type: Number, required: true, default: 1 },
bar: { type: Number, required: true, default: 2 },
\\"foo:bar\\": { type: String, required: true, default: 'foo-bar' },
\\"onUpdate:modelValue\\": { type: Function, required: true }
"foo:bar": { type: String, required: true, default: 'foo-bar' },
"onUpdate:modelValue": { type: Function, required: true }
},
setup(__props: any) {
@ -236,7 +236,7 @@ return () => {}
`;
exports[`sfc reactive props destructure > multiple variable declarations 1`] = `
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export default {
@ -246,7 +246,7 @@ export default {
const bar = 'fish', hello = 'world'
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */))
return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.foo) + " " + _toDisplayString(hello) + " " + _toDisplayString(bar), 1 /* TEXT */))
}
}
@ -272,7 +272,7 @@ return () => {}
`;
exports[`sfc reactive props destructure > non-identifier prop names 1`] = `
"import { toDisplayString as _toDisplayString } from \\"vue\\"
"import { toDisplayString as _toDisplayString } from "vue"
export default {
@ -280,10 +280,10 @@ export default {
setup(__props) {
let x = __props[\\"foo.bar\\"]
let x = __props["foo.bar"]
return (_ctx, _cache) => {
return _toDisplayString(__props[\\"foo.bar\\"])
return _toDisplayString(__props["foo.bar"])
}
}
@ -297,7 +297,7 @@ export default {
props: ['foo', 'bar', 'baz'],
setup(__props) {
const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"])
const rest = _createPropsRestProxy(__props, ["foo","bar"])
return () => {}
}

View File

@ -48,7 +48,7 @@ describe('defineModel()', () => {
{ defineModel: true }
)
assertCode(content)
expect(content).toMatch(`props: _mergeModels({ foo: String }`)
expect(content).toMatch(`props: /*#__PURE__*/_mergeModels({ foo: String }`)
expect(content).toMatch(`"modelValue": { default: 0 }`)
expect(content).toMatch(`const count = _useModel(__props, "modelValue")`)
expect(content).not.toMatch('defineModel')
@ -70,7 +70,7 @@ describe('defineModel()', () => {
{ defineModel: true }
)
assertCode(content)
expect(content).toMatch(`props: _mergeModels(['foo', 'bar'], {
expect(content).toMatch(`props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
"count": {},
})`)
expect(content).toMatch(`const count = _useModel(__props, "count")`)

View File

@ -78,7 +78,8 @@ describe('sfc reactive props destructure', () => {
// literals can be used as-is, non-literals are always returned from a
// function
// functions need to be marked with a skip marker
expect(content).toMatch(`props: _mergeDefaults(['foo', 'bar', 'baz'], {
expect(content)
.toMatch(`props: /*#__PURE__*/_mergeDefaults(['foo', 'bar', 'baz'], {
foo: 1,
bar: () => ({}),
func: () => {}, __skip_func: true
@ -98,7 +99,7 @@ describe('sfc reactive props destructure', () => {
// safely infer whether runtime type is Function (e.g. if the runtime decl
// is imported, or spreads another object)
expect(content)
.toMatch(`props: _mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
.toMatch(`props: /*#__PURE__*/_mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
foo: 1,
bar: () => ({}),
func: () => {}, __skip_func: true,
@ -122,7 +123,7 @@ describe('sfc reactive props destructure', () => {
})
expect(content).toMatch(`
props: _mergeDefaults(['foo', 'foo:bar'], {
props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
foo: 1,
"foo:bar": 'foo-bar'
}),`)

View File

@ -455,6 +455,88 @@ describe('resolveType', () => {
})
})
describe('generics', () => {
test('generic with type literal', () => {
expect(
resolve(`
type Props<T> = T
defineProps<Props<{ foo: string }>>()
`).props
).toStrictEqual({
foo: ['String']
})
})
test('generic used in intersection', () => {
expect(
resolve(`
type Foo = { foo: string; }
type Bar = { bar: number; }
type Props<T,U> = T & U & { baz: boolean }
defineProps<Props<Foo, Bar>>()
`).props
).toStrictEqual({
foo: ['String'],
bar: ['Number'],
baz: ['Boolean']
})
})
test('generic type /w generic type alias', () => {
expect(
resolve(`
type Aliased<T> = Readonly<Partial<T>>
type Props<T> = Aliased<T>
type Foo = { foo: string; }
defineProps<Props<Foo>>()
`).props
).toStrictEqual({
foo: ['String']
})
})
test('generic type /w aliased type literal', () => {
expect(
resolve(`
type Aliased<T> = { foo: T }
defineProps<Aliased<string>>()
`).props
).toStrictEqual({
foo: ['String']
})
})
test('generic type /w interface', () => {
expect(
resolve(`
interface Props<T> {
foo: T
}
type Foo = string
defineProps<Props<Foo>>()
`).props
).toStrictEqual({
foo: ['String']
})
})
test('generic from external-file', () => {
const files = {
'/foo.ts': 'export type P<T> = { foo: T }'
}
const { props } = resolve(
`
import { P } from './foo'
defineProps<P<string>>()
`,
files
)
expect(props).toStrictEqual({
foo: ['String']
})
})
})
describe('external type imports', () => {
test('relative ts', () => {
const files = {

View File

@ -144,6 +144,23 @@ describe('SFC scoped CSS', () => {
`)
})
test(':is() and :where() with multiple selectors', () => {
expect(compileScoped(`:is(.foo) { color: red; }`)).toMatchInlineSnapshot(`
":is(.foo[data-v-test]) { color: red;
}"
`)
expect(compileScoped(`:where(.foo, .bar) { color: red; }`))
.toMatchInlineSnapshot(`
":where(.foo[data-v-test], .bar[data-v-test]) { color: red;
}"
`)
expect(compileScoped(`:is(.foo, .bar) div { color: red; }`))
.toMatchInlineSnapshot(`
":is(.foo, .bar) div[data-v-test] { color: red;
}"
`)
})
test('media query', () => {
expect(compileScoped(`@media print { .foo { color: red }}`))
.toMatchInlineSnapshot(`

View File

@ -61,6 +61,33 @@ body
expect(result.errors.length).toBe(0)
})
test('preprocess pug with indents and blank lines', () => {
const template = parse(
`
<template lang="pug">
body
h1 The next line contains four spaces.
div.container
p The next line is empty.
p This is the last line.
</template>
`,
{ filename: 'example.vue', sourceMap: true }
).descriptor.template as SFCTemplateBlock
const result = compile({
filename: 'example.vue',
source: template.content,
preprocessLang: template.lang
})
expect(result.errors.length).toBe(0)
expect(result.source).toBe(
'<body><h1>The next line contains four spaces.</h1><div class="container"><p>The next line is empty.</p></div><p>This is the last line.</p></body>'
)
})
test('warn missing preprocessor', () => {
const template = parse(`<template lang="unknownLang">hi</template>\n`, {
filename: 'example.vue',

View File

@ -90,7 +90,7 @@ describe('CSS vars injection', () => {
expect(code).toMatchInlineSnapshot(`
".foo {
color: var(--test-color);
font-size: var(--test-font\\\\.size);
font-size: var(--test-font\\.size);
font-weight: var(--test-);
font-size: var(--test-1-);

View File

@ -80,6 +80,26 @@ font-weight: bold;
})
})
test('template block with lang + indent', () => {
// Padding determines how many blank lines will there be before the style block
const padding = Math.round(Math.random() * 10)
const template = parse(
`${'\n'.repeat(padding)}<template lang="pug">
h1 foo
div bar
span baz
</template>\n`
).descriptor.template!
expect(template.map).not.toBeUndefined()
const consumer = new SourceMapConsumer(template.map!)
consumer.eachMapping(mapping => {
expect(mapping.originalLine - mapping.generatedLine).toBe(padding)
expect(mapping.originalColumn - mapping.generatedColumn).toBe(2)
})
})
test('custom block', () => {
const padding = Math.round(Math.random() * 10)
const custom = parse(

View File

@ -1,6 +1,6 @@
{
"name": "@vue/compiler-sfc",
"version": "3.4.0-alpha.3",
"version": "3.4.0-alpha.4",
"description": "@vue/compiler-sfc",
"main": "dist/compiler-sfc.cjs.js",
"module": "dist/compiler-sfc.esm-browser.js",
@ -32,18 +32,18 @@
},
"homepage": "https://github.com/vuejs/core-vapor/tree/main/packages/compiler-sfc#readme",
"dependencies": {
"@babel/parser": "^7.23.4",
"@babel/parser": "^7.23.5",
"@vue/compiler-core": "workspace:*",
"@vue/compiler-dom": "workspace:*",
"@vue/compiler-ssr": "workspace:*",
"@vue/shared": "workspace:*",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.5",
"postcss": "^8.4.31",
"postcss": "^8.4.32",
"source-map-js": "^1.0.2"
},
"devDependencies": {
"@babel/types": "^7.23.4",
"@babel/types": "^7.23.5",
"@vue/consolidate": "^0.17.3",
"hash-sum": "^2.0.0",
"lru-cache": "^10.1.0",

View File

@ -239,22 +239,34 @@ export function parse(
}
}
// dedent pug/jade templates
let templateColumnOffset = 0
if (
descriptor.template &&
(descriptor.template.lang === 'pug' || descriptor.template.lang === 'jade')
) {
;[descriptor.template.content, templateColumnOffset] = dedent(
descriptor.template.content
)
}
if (sourceMap) {
const genMap = (block: SFCBlock | null) => {
const genMap = (block: SFCBlock | null, columnOffset = 0) => {
if (block && !block.src) {
block.map = generateSourceMap(
filename,
source,
block.content,
sourceRoot,
!pad || block.type === 'template' ? block.loc.start.line - 1 : 0
!pad || block.type === 'template' ? block.loc.start.line - 1 : 0,
columnOffset
)
}
}
genMap(descriptor.template)
genMap(descriptor.template, templateColumnOffset)
genMap(descriptor.script)
descriptor.styles.forEach(genMap)
descriptor.customBlocks.forEach(genMap)
descriptor.styles.forEach(s => genMap(s))
descriptor.customBlocks.forEach(s => genMap(s))
}
// parse CSS vars
@ -335,7 +347,8 @@ function generateSourceMap(
source: string,
generated: string,
sourceRoot: string,
lineOffset: number
lineOffset: number,
columnOffset: number
): RawSourceMap {
const map = new SourceMapGenerator({
file: filename.replace(/\\/g, '/'),
@ -351,7 +364,7 @@ function generateSourceMap(
if (!/\s/.test(line[i])) {
map._mappings.add({
originalLine,
originalColumn: i,
originalColumn: i + columnOffset,
generatedLine,
generatedColumn: i,
source: filename,
@ -431,3 +444,31 @@ export function hmrShouldReload(
return false
}
/**
* Dedent a string.
*
* This removes any whitespace that is common to all lines in the string from
* each line in the string.
*/
function dedent(s: string): [string, number] {
const lines = s.split('\n')
const minIndent = lines.reduce(function (minIndent, line) {
if (line.trim() === '') {
return minIndent
}
const indent = line.match(/^\s*/)?.[0]?.length || 0
return Math.min(indent, minIndent)
}, Infinity)
if (minIndent === 0) {
return [s, minIndent]
}
return [
lines
.map(function (line) {
return line.slice(minIndent)
})
.join('\n'),
minIndent
]
}

View File

@ -62,7 +62,9 @@ export function genRuntimeEmits(ctx: ScriptCompileContext): string | undefined {
.map(n => JSON.stringify(`update:${n}`))
.join(', ')}]`
emitsDecl = emitsDecl
? `${ctx.helper('mergeModels')}(${emitsDecl}, ${modelEmitsDecl})`
? `/*#__PURE__*/${ctx.helper(
'mergeModels'
)}(${emitsDecl}, ${modelEmitsDecl})`
: modelEmitsDecl
}
return emitsDecl

View File

@ -148,7 +148,7 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
)
}
if (defaults.length) {
propsDecls = `${ctx.helper(
propsDecls = `/*#__PURE__*/${ctx.helper(
`mergeDefaults`
)}(${propsDecls}, {\n ${defaults.join(',\n ')}\n})`
}
@ -160,7 +160,9 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
const modelsDecls = genModelProps(ctx)
if (propsDecls && modelsDecls) {
return `${ctx.helper('mergeModels')}(${propsDecls}, ${modelsDecls})`
return `/*#__PURE__*/${ctx.helper(
'mergeModels'
)}(${propsDecls}, ${modelsDecls})`
} else {
return modelsDecls || propsDecls
}
@ -190,9 +192,9 @@ export function extractRuntimeProps(
${propStrings.join(',\n ')}\n }`
if (ctx.propsRuntimeDefaults && !hasStaticDefaults) {
propsDecls = `${ctx.helper('mergeDefaults')}(${propsDecls}, ${ctx.getString(
ctx.propsRuntimeDefaults
)})`
propsDecls = `/*#__PURE__*/${ctx.helper(
'mergeDefaults'
)}(${propsDecls}, ${ctx.getString(ctx.propsRuntimeDefaults)})`
}
return propsDecls

View File

@ -140,7 +140,8 @@ interface ResolvedElements {
export function resolveTypeElements(
ctx: TypeResolveContext,
node: Node & MaybeWithScope & { _resolvedElements?: ResolvedElements },
scope?: TypeScope
scope?: TypeScope,
typeParameters?: Record<string, Node>
): ResolvedElements {
if (node._resolvedElements) {
return node._resolvedElements
@ -148,30 +149,37 @@ export function resolveTypeElements(
return (node._resolvedElements = innerResolveTypeElements(
ctx,
node,
node._ownerScope || scope || ctxToScope(ctx)
node._ownerScope || scope || ctxToScope(ctx),
typeParameters
))
}
function innerResolveTypeElements(
ctx: TypeResolveContext,
node: Node,
scope: TypeScope
scope: TypeScope,
typeParameters?: Record<string, Node>
): ResolvedElements {
switch (node.type) {
case 'TSTypeLiteral':
return typeElementsToMap(ctx, node.members, scope)
return typeElementsToMap(ctx, node.members, scope, typeParameters)
case 'TSInterfaceDeclaration':
return resolveInterfaceMembers(ctx, node, scope)
return resolveInterfaceMembers(ctx, node, scope, typeParameters)
case 'TSTypeAliasDeclaration':
case 'TSParenthesizedType':
return resolveTypeElements(ctx, node.typeAnnotation, scope)
return resolveTypeElements(
ctx,
node.typeAnnotation,
scope,
typeParameters
)
case 'TSFunctionType': {
return { props: {}, calls: [node] }
}
case 'TSUnionType':
case 'TSIntersectionType':
return mergeElements(
node.types.map(t => resolveTypeElements(ctx, t, scope)),
node.types.map(t => resolveTypeElements(ctx, t, scope, typeParameters)),
node.type
)
case 'TSMappedType':
@ -193,20 +201,57 @@ function innerResolveTypeElements(
scope.imports[typeName]?.source === 'vue'
) {
return resolveExtractPropTypes(
resolveTypeElements(ctx, node.typeParameters.params[0], scope),
resolveTypeElements(
ctx,
node.typeParameters.params[0],
scope,
typeParameters
),
scope
)
}
const resolved = resolveTypeReference(ctx, node, scope)
if (resolved) {
return resolveTypeElements(ctx, resolved, resolved._ownerScope)
const typeParams: Record<string, Node> = Object.create(null)
if (
(resolved.type === 'TSTypeAliasDeclaration' ||
resolved.type === 'TSInterfaceDeclaration') &&
resolved.typeParameters &&
node.typeParameters
) {
resolved.typeParameters.params.forEach((p, i) => {
let param = typeParameters && typeParameters[p.name]
if (!param) param = node.typeParameters!.params[i]
typeParams[p.name] = param
})
}
return resolveTypeElements(
ctx,
resolved,
resolved._ownerScope,
typeParams
)
} else {
if (typeof typeName === 'string') {
if (typeParameters && typeParameters[typeName]) {
return resolveTypeElements(
ctx,
typeParameters[typeName],
scope,
typeParameters
)
}
if (
// @ts-ignore
SupportedBuiltinsSet.has(typeName)
) {
return resolveBuiltin(ctx, node, typeName as any, scope)
return resolveBuiltin(
ctx,
node,
typeName as any,
scope,
typeParameters
)
} else if (typeName === 'ReturnType' && node.typeParameters) {
// limited support, only reference types
const ret = resolveReturnType(
@ -265,11 +310,17 @@ function innerResolveTypeElements(
function typeElementsToMap(
ctx: TypeResolveContext,
elements: TSTypeElement[],
scope = ctxToScope(ctx)
scope = ctxToScope(ctx),
typeParameters?: Record<string, Node>
): ResolvedElements {
const res: ResolvedElements = { props: {} }
for (const e of elements) {
if (e.type === 'TSPropertySignature' || e.type === 'TSMethodSignature') {
// capture generic parameters on node's scope
if (typeParameters) {
scope = createChildScope(scope)
Object.assign(scope.types, typeParameters)
}
;(e as MaybeWithScope)._ownerScope = scope
const name = getId(e.key)
if (name && !e.computed) {
@ -345,9 +396,15 @@ function createProperty(
function resolveInterfaceMembers(
ctx: TypeResolveContext,
node: TSInterfaceDeclaration & MaybeWithScope,
scope: TypeScope
scope: TypeScope,
typeParameters?: Record<string, Node>
): ResolvedElements {
const base = typeElementsToMap(ctx, node.body.body, node._ownerScope)
const base = typeElementsToMap(
ctx,
node.body.body,
node._ownerScope,
typeParameters
)
if (node.extends) {
for (const ext of node.extends) {
if (
@ -565,9 +622,15 @@ function resolveBuiltin(
ctx: TypeResolveContext,
node: TSTypeReference | TSExpressionWithTypeArguments,
name: GetSetType<typeof SupportedBuiltinsSet>,
scope: TypeScope
scope: TypeScope,
typeParameters?: Record<string, Node>
): ResolvedElements {
const t = resolveTypeElements(ctx, node.typeParameters!.params[0], scope)
const t = resolveTypeElements(
ctx,
node.typeParameters!.params[0],
scope,
typeParameters
)
switch (name) {
case 'Partial': {
const res: ResolvedElements = { props: {}, calls: t.calls }
@ -741,7 +804,25 @@ let loadTS: (() => typeof TS) | undefined
* @private
*/
export function registerTS(_loadTS: () => typeof TS) {
loadTS = _loadTS
loadTS = () => {
try {
return _loadTS()
} catch (err: any) {
if (
typeof err.message === 'string' &&
err.message.includes('Cannot find module')
) {
throw new Error(
'Failed to load TypeScript, which is required for resolving imported types. ' +
'Please make sure "typescript" is installed as a project dependency.'
)
} else {
throw new Error(
'Failed to load TypeScript for resolving imported types.'
)
}
}
}
}
type FS = NonNullable<SFCScriptCompileOptions['fs']>
@ -790,7 +871,12 @@ function importSourceToScope(
scope: TypeScope,
source: string
): TypeScope {
const fs = resolveFS(ctx)
let fs: FS | undefined
try {
fs = resolveFS(ctx)
} catch (err: any) {
return ctx.error(err.message, node, scope)
}
if (!fs) {
return ctx.error(
`No fs option provided to \`compileScript\` in non-Node environment. ` +
@ -1102,14 +1188,7 @@ function moduleDeclToScope(
return node._resolvedChildScope
}
const scope = new TypeScope(
parentScope.filename,
parentScope.source,
parentScope.offset,
Object.create(parentScope.imports),
Object.create(parentScope.types),
Object.create(parentScope.declares)
)
const scope = createChildScope(parentScope)
if (node.body.type === 'TSModuleDeclaration') {
const decl = node.body as TSModuleDeclaration & WithScope
@ -1123,6 +1202,17 @@ function moduleDeclToScope(
return (node._resolvedChildScope = scope)
}
function createChildScope(parentScope: TypeScope) {
return new TypeScope(
parentScope.filename,
parentScope.source,
parentScope.offset,
Object.create(parentScope.imports),
Object.create(parentScope.types),
Object.create(parentScope.declares)
)
}
const importExportRE = /^Import|^Export/
function recordTypes(
@ -1261,7 +1351,7 @@ function recordType(
if (overwriteId || node.id) types[overwriteId || getId(node.id!)] = node
break
case 'TSTypeAliasDeclaration':
types[node.id.name] = node.typeAnnotation
types[node.id.name] = node.typeParameters ? node : node.typeAnnotation
break
case 'TSDeclareFunction':
if (node.id) declares[node.id.name] = node

View File

@ -121,6 +121,8 @@ export function getEscapedPropName(key: string) {
export const cssVarNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
export function getEscapedCssVarName(key: string) {
return key.replace(cssVarNameEscapeSymbolsRE, s => `\\${s}`)
export function getEscapedCssVarName(key: string, doubleEscape: boolean) {
return key.replace(cssVarNameEscapeSymbolsRE, s =>
doubleEscape ? `\\\\${s}` : `\\${s}`
)
}

View File

@ -22,17 +22,25 @@ export function genCssVarsFromList(
): string {
return `{\n ${vars
.map(
key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`
key =>
`"${isSSR ? `--` : ``}${genVarName(id, key, isProd, isSSR)}": (${key})`
)
.join(',\n ')}\n}`
}
function genVarName(id: string, raw: string, isProd: boolean): string {
function genVarName(
id: string,
raw: string,
isProd: boolean,
isSSR = false
): string {
if (isProd) {
return hash(id + raw)
} else {
// escape ASCII Punctuation & Symbols
return `${id}-${getEscapedCssVarName(raw)}`
// #7823 need to double-escape in SSR because the attributes are rendered
// into an HTML string
return `${id}-${getEscapedCssVarName(raw, isSSR)}`
}
}

View File

@ -170,15 +170,23 @@ function rewriteSelector(
}
}
if (n.type !== 'pseudo' && n.type !== 'combinator') {
if (
(n.type !== 'pseudo' && n.type !== 'combinator') ||
(n.type === 'pseudo' && (n.value === ':is' || n.value === ':where'))
) {
node = n
}
})
if (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where')) {
rewriteSelector(id, n.nodes[0], selectorRoot, slotted)
if (node) {
const { type, value } = node as selectorParser.Node
if (type === 'pseudo' && (value === ':is' || value === ':where')) {
;(node as selectorParser.Pseudo).nodes.forEach(value =>
rewriteSelector(id, value, selectorRoot, slotted)
)
shouldInject = false
}
})
}
if (node) {
;(node as selectorParser.Node).spaces.after = ''

View File

@ -3,14 +3,14 @@ import { compile } from '../src'
describe('ssr: components', () => {
test('basic', () => {
expect(compile(`<foo id="a" :prop="b" />`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _mergeProps({
id: \\"a\\",
id: "a",
prop: _ctx.b
}, _attrs), null, _parent))
}"
@ -20,11 +20,11 @@ describe('ssr: components', () => {
// event listeners should still be passed
test('event listeners', () => {
expect(compile(`<foo @click="bar" />`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _mergeProps({ onClick: _ctx.bar }, _attrs), null, _parent))
}"
@ -34,21 +34,21 @@ describe('ssr: components', () => {
test('dynamic component', () => {
expect(compile(`<component is="foo" prop="b" />`).code)
.toMatchInlineSnapshot(`
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue")
const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(\\"foo\\"), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("foo"), _mergeProps({ prop: "b" }, _attrs), null), _parent)
}"
`)
expect(compile(`<component :is="foo" prop="b" />`).code)
.toMatchInlineSnapshot(`
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue")
const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: "b" }, _attrs), null), _parent)
}"
`)
})
@ -56,11 +56,11 @@ describe('ssr: components', () => {
describe('slots', () => {
test('implicit default slot', () => {
expect(compile(`<foo>hello<div/></foo>`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -68,8 +68,8 @@ describe('ssr: components', () => {
_push(\`hello<div\${_scopeId}></div>\`)
} else {
return [
_createTextVNode(\\"hello\\"),
_createVNode(\\"div\\")
_createTextVNode("hello"),
_createVNode("div")
]
}
}),
@ -82,11 +82,11 @@ describe('ssr: components', () => {
test('explicit default slot', () => {
expect(compile(`<foo v-slot="{ msg }">{{ msg + outer }}</foo>`).code)
.toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx(({ msg }, _push, _parent, _scopeId) => {
@ -116,11 +116,11 @@ describe('ssr: components', () => {
<template v-slot:named>bar</template>
</foo>`).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -128,7 +128,7 @@ describe('ssr: components', () => {
_push(\`foo\`)
} else {
return [
_createTextVNode(\\"foo\\")
_createTextVNode("foo")
]
}
}),
@ -137,7 +137,7 @@ describe('ssr: components', () => {
_push(\`bar\`)
} else {
return [
_createTextVNode(\\"bar\\")
_createTextVNode("bar")
]
}
}),
@ -153,26 +153,26 @@ describe('ssr: components', () => {
<template v-slot:named v-if="ok">foo</template>
</foo>`).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok)
? {
name: \\"named\\",
name: "named",
fn: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`foo\`)
} else {
return [
_createTextVNode(\\"foo\\")
_createTextVNode("foo")
]
}
}),
key: \\"0\\"
key: "0"
}
: undefined
]), _parent))
@ -189,11 +189,11 @@ describe('ssr: components', () => {
expect(code).not.toMatch(`_ctx.index`)
expect(code).toMatch(`_ctx.bar`)
expect(code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
_renderList(_ctx.names, (key, index) => {
@ -230,11 +230,11 @@ describe('ssr: components', () => {
</template>
</foo>`).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, {
foo: _withCtx(({ list }, _push, _parent, _scopeId) => {
@ -251,12 +251,12 @@ describe('ssr: components', () => {
} else {
return [
(_ctx.ok)
? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
? (_openBlock(), _createBlock("div", { key: 0 }, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createBlock(\\"span\\"))
return (_openBlock(), _createBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
]))
: _createCommentVNode(\\"v-if\\", true)
: _createCommentVNode("v-if", true)
]
}
}),
@ -274,12 +274,12 @@ describe('ssr: components', () => {
} else {
return [
ok
? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
? (_openBlock(), _createBlock("div", { key: 0 }, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (i) => {
return (_openBlock(), _createBlock(\\"span\\"))
return (_openBlock(), _createBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
]))
: _createCommentVNode(\\"v-if\\", true)
: _createCommentVNode("v-if", true)
]
}
}),
@ -294,12 +294,12 @@ describe('ssr: components', () => {
const { code } = compile(`<foo><bar v-once /></foo>`)
expect(code).not.toMatch(`_cache`)
expect(compile(`<foo><bar v-once /></foo>`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_bar = _resolveComponent(\\"bar\\")
const _component_foo = _resolveComponent("foo")
const _component_bar = _resolveComponent("bar")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -321,7 +321,7 @@ describe('ssr: components', () => {
test('transition', () => {
expect(compile(`<transition><div/></transition>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
@ -332,11 +332,11 @@ describe('ssr: components', () => {
test('keep-alive', () => {
expect(compile(`<keep-alive><foo/></keep-alive>`).code)
.toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, null, _parent))
}"
@ -349,11 +349,11 @@ describe('ssr: components', () => {
compile(`<foo><transition><div v-if="false"/></transition></foo>`)
.code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -369,8 +369,8 @@ describe('ssr: components', () => {
_createVNode(_Transition, null, {
default: _withCtx(() => [
false
? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
: _createCommentVNode(\\"v-if\\", true)
? (_openBlock(), _createBlock("div", { key: 0 }))
: _createCommentVNode("v-if", true)
]),
_: 1 /* STABLE */
})
@ -388,14 +388,14 @@ describe('ssr: components', () => {
describe('custom directive', () => {
test('basic', () => {
expect(compile(`<foo v-xxx:x.y="z" />`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require("vue")
const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _directive_xxx = _resolveDirective(\\"xxx\\")
const _component_foo = _resolveComponent("foo")
const _directive_xxx = _resolveDirective("xxx")
_push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true })), null, _parent))
_push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true })), null, _parent))
}"
`)
})

View File

@ -56,16 +56,16 @@ describe('ssr: element', () => {
test('<textarea> with dynamic v-bind', () => {
expect(compile(`<textarea v-bind="obj">fallback</textarea>`).code)
.toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0
_push(\`<textarea\${
_ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), \\"textarea\\")
_ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), "textarea")
}>\${
_ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"fallback\\")
_ssrInterpolate(("value" in _temp0) ? _temp0.value : "fallback")
}</textarea>\`)
}"
`)
@ -75,7 +75,7 @@ describe('ssr: element', () => {
expect(
compile(`<div>{{ hello }}<textarea v-bind="a"></textarea></div>`).code
).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0
@ -85,9 +85,9 @@ describe('ssr: element', () => {
}>\${
_ssrInterpolate(_ctx.hello)
}<textarea\${
_ssrRenderAttrs(_temp0 = _ctx.a, \\"textarea\\")
_ssrRenderAttrs(_temp0 = _ctx.a, "textarea")
}>\${
_ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"\\")
_ssrInterpolate(("value" in _temp0) ? _temp0.value : "")
}</textarea></div>\`)
}"
`)
@ -99,11 +99,11 @@ describe('ssr: element', () => {
isCustomElement: () => true
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), \\"my-foo\\")}></my-foo>\`)
_push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), "my-foo")}></my-foo>\`)
}"
`)
})
@ -113,7 +113,7 @@ describe('ssr: element', () => {
test('static attrs', () => {
expect(
getCompiledString(`<div id="foo" class="bar"></div>`)
).toMatchInlineSnapshot('"`<div id=\\"foo\\" class=\\"bar\\"></div>`"')
).toMatchInlineSnapshot(`"\`<div id="foo" class="bar"></div>\`"`)
})
test('ignore static key/ref', () => {
@ -131,53 +131,53 @@ describe('ssr: element', () => {
test('v-bind:class', () => {
expect(getCompiledString(`<div id="foo" :class="bar"></div>`))
.toMatchInlineSnapshot(`
"\`<div id=\\"foo\\" class=\\"\${
"\`<div id="foo" class="\${
_ssrRenderClass(_ctx.bar)
}\\"></div>\`"
}"></div>\`"
`)
})
test('static class + v-bind:class', () => {
expect(getCompiledString(`<div class="foo" :class="bar"></div>`))
.toMatchInlineSnapshot(`
"\`<div class=\\"\${
_ssrRenderClass([_ctx.bar, \\"foo\\"])
}\\"></div>\`"
"\`<div class="\${
_ssrRenderClass([_ctx.bar, "foo"])
}"></div>\`"
`)
})
test('v-bind:class + static class', () => {
expect(getCompiledString(`<div :class="bar" class="foo"></div>`))
.toMatchInlineSnapshot(`
"\`<div class=\\"\${
_ssrRenderClass([_ctx.bar, \\"foo\\"])
}\\"></div>\`"
"\`<div class="\${
_ssrRenderClass([_ctx.bar, "foo"])
}"></div>\`"
`)
})
test('v-bind:style', () => {
expect(getCompiledString(`<div id="foo" :style="bar"></div>`))
.toMatchInlineSnapshot(`
"\`<div id=\\"foo\\" style=\\"\${
"\`<div id="foo" style="\${
_ssrRenderStyle(_ctx.bar)
}\\"></div>\`"
}"></div>\`"
`)
})
test('static style + v-bind:style', () => {
expect(getCompiledString(`<div style="color:red;" :style="bar"></div>`))
.toMatchInlineSnapshot(`
"\`<div style=\\"\${
_ssrRenderStyle([{\\"color\\":\\"red\\"}, _ctx.bar])
}\\"></div>\`"
"\`<div style="\${
_ssrRenderStyle([{"color":"red"}, _ctx.bar])
}"></div>\`"
`)
})
test('v-bind:arg (boolean)', () => {
expect(getCompiledString(`<input type="checkbox" :checked="checked">`))
.toMatchInlineSnapshot(`
"\`<input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr(_ctx.checked)) ? \\" checked\\" : \\"\\"
"\`<input type="checkbox"\${
(_ssrIncludeBooleanAttr(_ctx.checked)) ? " checked" : ""
}>\`"
`)
})
@ -186,8 +186,8 @@ describe('ssr: element', () => {
expect(getCompiledString(`<div :id="id" class="bar"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttr(\\"id\\", _ctx.id)
} class=\\"bar\\"></div>\`"
_ssrRenderAttr("id", _ctx.id)
} class="bar"></div>\`"
`)
})
@ -195,7 +195,7 @@ describe('ssr: element', () => {
expect(getCompiledString(`<div v-bind:[key]="value"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs({ [_ctx.key || \\"\\"]: _ctx.value })
_ssrRenderAttrs({ [_ctx.key || ""]: _ctx.value })
}></div>\`"
`)
@ -203,8 +203,8 @@ describe('ssr: element', () => {
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs({
class: \\"foo\\",
[_ctx.key || \\"\\"]: _ctx.value
class: "foo",
[_ctx.key || ""]: _ctx.value
})
}></div>\`"
`)
@ -214,7 +214,7 @@ describe('ssr: element', () => {
"\`<div\${
_ssrRenderAttrs({
id: _ctx.id,
[_ctx.key || \\"\\"]: _ctx.value
[_ctx.key || ""]: _ctx.value
})
}></div>\`"
`)
@ -231,7 +231,7 @@ describe('ssr: element', () => {
expect(getCompiledString(`<div class="foo" v-bind="obj"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ctx.obj))
_ssrRenderAttrs(_mergeProps({ class: "foo" }, _ctx.obj))
}></div>\`"
`)
@ -246,7 +246,7 @@ describe('ssr: element', () => {
expect(getCompiledString(`<div :[key]="id" v-bind="obj"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({ [_ctx.key || \\"\\"]: _ctx.id }, _ctx.obj))
_ssrRenderAttrs(_mergeProps({ [_ctx.key || ""]: _ctx.id }, _ctx.obj))
}></div>\`"
`)
@ -255,7 +255,7 @@ describe('ssr: element', () => {
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({
class: [\\"a\\", _ctx.b]
class: ["a", _ctx.b]
}, _ctx.obj))
}></div>\`"
`)
@ -268,7 +268,7 @@ describe('ssr: element', () => {
).toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({
style: [{\\"color\\":\\"red\\"}, _ctx.b]
style: [{"color":"red"}, _ctx.b]
}, _ctx.obj))
}></div>\`"
`)
@ -277,10 +277,10 @@ describe('ssr: element', () => {
test('should ignore v-on', () => {
expect(
getCompiledString(`<div id="foo" @click="bar"/>`)
).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`)
expect(
getCompiledString(`<div id="foo" v-on="bar"/>`)
).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`)
expect(getCompiledString(`<div v-bind="foo" v-on="bar"/>`))
.toMatchInlineSnapshot(`
"\`<div\${
@ -292,7 +292,7 @@ describe('ssr: element', () => {
test('custom dir', () => {
expect(getCompiledString(`<div v-xxx:x.y="z" />`)).toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true }))
_ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true }))
}></div>\`"
`)
})
@ -301,7 +301,7 @@ describe('ssr: element', () => {
expect(getCompiledString(`<div class="foo" v-xxx />`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
_ssrRenderAttrs(_mergeProps({ class: "foo" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`"
`)
})
@ -333,8 +333,8 @@ describe('ssr: element', () => {
).toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps(_ctx.x, {
class: \\"foo\\",
title: \\"bar\\"
class: "foo",
title: "bar"
}, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`"
`)

View File

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr: attrs fallthrough', () => {
test('basic', () => {
expect(compile(`<div/>`).code).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
@ -13,7 +13,7 @@ describe('ssr: attrs fallthrough', () => {
test('with comments', () => {
expect(compile(`<!--!--><div/>`).code).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[--><!--!--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
@ -40,7 +40,7 @@ describe('ssr: attrs fallthrough', () => {
test('fallthrough component content (root with comments)', () => {
expect(compile(`<!--root--><transition><div/></transition>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)

View File

@ -8,8 +8,8 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }}
@ -24,7 +24,7 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }}
@ -43,11 +43,11 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
const _cssVars = { style: { color: _ctx.color }}
_push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`)
@ -63,8 +63,8 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }}
@ -95,8 +95,8 @@ describe('ssr: inject <style vars>', () => {
}
).code
).toMatchInlineSnapshot(`
"const { withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
"const { withCtx: _withCtx } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }}
@ -122,7 +122,7 @@ describe('ssr: inject <style vars>', () => {
expect(result.code).toMatchInlineSnapshot(`
"(_ctx, _push, _parent, _attrs) => {
const _cssVars = { style: { \\"--hash\\": (_unref(dynamic)) }}
const _cssVars = { style: { "--hash": (_unref(dynamic)) }}
_push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
}"
`)

View File

@ -4,7 +4,7 @@ describe('ssr compile: teleport', () => {
test('should work', () => {
expect(compile(`<teleport :to="target"><div/></teleport>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
"const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => {
@ -17,7 +17,7 @@ describe('ssr compile: teleport', () => {
test('disabled prop handling', () => {
expect(compile(`<teleport :to="target" disabled><div/></teleport>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
"const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => {
@ -29,7 +29,7 @@ describe('ssr compile: teleport', () => {
expect(
compile(`<teleport :to="target" :disabled="foo"><div/></teleport>`).code
).toMatchInlineSnapshot(`
"const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
"const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => {

View File

@ -10,7 +10,7 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
"import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
@ -26,11 +26,11 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from "vue"
import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -38,7 +38,7 @@ describe('ssr: scopeId', () => {
_push(\`foo\`)
} else {
return [
_createTextVNode(\\"foo\\")
_createTextVNode("foo")
]
}
}),
@ -55,11 +55,11 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -67,7 +67,7 @@ describe('ssr: scopeId', () => {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
} else {
return [
_createVNode(\\"span\\", null, \\"hello\\")
_createVNode("span", null, "hello")
]
}
}),
@ -84,12 +84,12 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_bar = _resolveComponent(\\"bar\\")
const _component_foo = _resolveComponent("foo")
const _component_bar = _resolveComponent("bar")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -101,7 +101,7 @@ describe('ssr: scopeId', () => {
_push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
} else {
return [
_createVNode(\\"span\\")
_createVNode("span")
]
}
}),
@ -109,10 +109,10 @@ describe('ssr: scopeId', () => {
}, _parent, _scopeId))
} else {
return [
_createVNode(\\"span\\", null, \\"hello\\"),
_createVNode("span", null, "hello"),
_createVNode(_component_bar, null, {
default: _withCtx(() => [
_createVNode(\\"span\\")
_createVNode("span")
]),
_: 1 /* STABLE */
})
@ -136,11 +136,11 @@ describe('ssr: scopeId', () => {
}
).code
).toMatchInlineSnapshot(`
"import { mergeProps as _mergeProps } from \\"vue\\"
import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
"import { mergeProps as _mergeProps } from "vue"
import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs))} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
_push(\`<div\${_ssrRenderAttrs(_mergeProps({ class: "red" }, _attrs))} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
}"
`)
@ -154,14 +154,14 @@ describe('ssr: scopeId', () => {
}
).code
).toMatchInlineSnapshot(`
"import { mergeProps as _mergeProps } from \\"vue\\"
import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
"import { mergeProps as _mergeProps } from "vue"
import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<\${
_ctx.someTag
}\${
_ssrRenderAttrs(_mergeProps({ class: \\"red\\" }, _attrs))
_ssrRenderAttrs(_mergeProps({ class: "red" }, _attrs))
} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></\${
_ctx.someTag
}>\`)

View File

@ -4,27 +4,27 @@ import { ssrHelpers, SSR_RENDER_SLOT_INNER } from '../src/runtimeHelpers'
describe('ssr: <slot>', () => {
test('basic', () => {
expect(compile(`<slot/>`).code).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
}"
`)
})
test('with name', () => {
expect(compile(`<slot name="foo" />`).code).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent)
_ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent)
}"
`)
})
test('with dynamic name', () => {
expect(compile(`<slot :name="bar.baz" />`).code).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent)
@ -35,12 +35,12 @@ describe('ssr: <slot>', () => {
test('with props', () => {
expect(compile(`<slot name="foo" :p="1" bar="2" />`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"foo\\", {
_ssrRenderSlot(_ctx.$slots, "foo", {
p: 1,
bar: \\"2\\"
bar: "2"
}, null, _push, _parent)
}"
`)
@ -49,10 +49,10 @@ describe('ssr: <slot>', () => {
test('with fallback', () => {
expect(compile(`<slot>some {{ fallback }} content</slot>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
"const { ssrRenderSlot: _ssrRenderSlot, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, () => {
_ssrRenderSlot(_ctx.$slots, "default", {}, () => {
_push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
}, _push, _parent)
}"
@ -65,10 +65,10 @@ describe('ssr: <slot>', () => {
scopeId: 'hello'
}).code
).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\")
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s")
}"
`)
})
@ -80,10 +80,10 @@ describe('ssr: <slot>', () => {
slotted: false
}).code
).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
}"
`)
})
@ -94,19 +94,19 @@ describe('ssr: <slot>', () => {
scopeId: 'hello'
}).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require(\\"vue\\")
const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require("vue")
const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_Comp = _resolveComponent(\\"Comp\\")
const _component_Comp = _resolveComponent("Comp")
_push(_ssrRenderComponent(_component_Comp, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\" + _scopeId)
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s" + _scopeId)
} else {
return [
_renderSlot(_ctx.$slots, \\"default\\")
_renderSlot(_ctx.$slots, "default")
]
}
}),
@ -120,10 +120,10 @@ describe('ssr: <slot>', () => {
const { code } = compile(`<transition><slot/></transition>`)
expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
expect(code).toMatchInlineSnapshot(`
"const { ssrRenderSlotInner: _ssrRenderSlotInner } = require(\\"vue/server-renderer\\")
"const { ssrRenderSlotInner: _ssrRenderSlotInner } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlotInner(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null, true)
_ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
}"
`)
})

View File

@ -3,11 +3,11 @@ import { compile } from '../src'
describe('ssr compile: suspense', () => {
test('implicit default', () => {
expect(compile(`<suspense><foo/></suspense>`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_ssrRenderSuspense(_push, {
default: () => {
@ -30,11 +30,11 @@ describe('ssr compile: suspense', () => {
</template>
</suspense>`).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_foo = _resolveComponent("foo")
_ssrRenderSuspense(_push, {
default: () => {

View File

@ -8,7 +8,7 @@ describe('ssr: text', () => {
test('static text with template string special chars', () => {
expect(getCompiledString(`\`\${foo}\``)).toMatchInlineSnapshot(
'"`\\\\`\\\\${foo}\\\\``"'
`"\`\\\`\\\${foo}\\\`\`"`
)
})
@ -17,7 +17,7 @@ describe('ssr: text', () => {
// snapshot -> inline snapshot goes through two escapes
// so that makes a total of 3 * 2 * 2 = 12 back slashes
expect(getCompiledString(`\\$foo`)).toMatchInlineSnapshot(
'"`\\\\\\\\\\\\$foo`"'
`"\`\\\\\\$foo\`"`
)
})
@ -43,7 +43,7 @@ describe('ssr: text', () => {
test('interpolation', () => {
expect(compile(`foo {{ bar }} baz`).code).toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
"const { ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`foo \${_ssrInterpolate(_ctx.bar)} baz\`)
@ -56,7 +56,7 @@ describe('ssr: text', () => {
compile(`<div><span>{{ foo }} bar</span><span>baz {{ qux }}</span></div>`)
.code
).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${

View File

@ -4,22 +4,22 @@ describe('transition', () => {
test('basic', () => {
expect(compile(`<transition><div>foo</div></transition>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}>foo</div>\`)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}>foo</div>\`)
}"
`)
})
test('with appear', () => {
expect(compile(`<transition appear><div>foo</div></transition>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<template><div\${_ssrRenderAttrs(_attrs)}>foo</div></template>\`)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<template><div\${_ssrRenderAttrs(_attrs)}>foo</div></template>\`)
}"
`)
})
})

View File

@ -8,7 +8,7 @@ describe('transition-group', () => {
compile(`<transition-group><div v-for="i in list"/></transition-group>`)
.code
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
@ -26,7 +26,7 @@ describe('transition-group', () => {
`<transition-group tag="ul"><div v-for="i in list"/></transition-group>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`)
@ -44,7 +44,7 @@ describe('transition-group', () => {
`<transition-group :tag="someTag"><div v-for="i in list"/></transition-group>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<\${
@ -70,7 +70,7 @@ describe('transition-group', () => {
</transition-group>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
@ -97,13 +97,13 @@ describe('transition-group', () => {
</transition-group>`
).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<ul\${_ssrRenderAttrs(_mergeProps({
class: \\"red\\",
id: \\"ok\\"
class: "red",
id: "ok"
}, _attrs))}></ul>\`)
}"
`)

View File

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr: v-for', () => {
test('basic', () => {
expect(compile(`<div v-for="i in list" />`).code).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
@ -18,7 +18,7 @@ describe('ssr: v-for', () => {
test('nested content', () => {
expect(compile(`<div v-for="i in list">foo<span>bar</span></div>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
@ -38,7 +38,7 @@ describe('ssr: v-for', () => {
`</div>`
).code
).toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
@ -61,7 +61,7 @@ describe('ssr: v-for', () => {
test('template v-for (text)', () => {
expect(compile(`<template v-for="i in list">{{ i }}</template>`).code)
.toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
@ -78,7 +78,7 @@ describe('ssr: v-for', () => {
compile(`<template v-for="i in list"><span>{{ i }}</span></template>`)
.code
).toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
@ -96,7 +96,7 @@ describe('ssr: v-for', () => {
`<template v-for="i in list"><span>{{ i }}</span><span>{{ i + 1 }}</span></template>`
).code
).toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
@ -120,7 +120,7 @@ describe('ssr: v-for', () => {
expect(code).not.toMatch(`_ctx.foo`)
expect(code).not.toMatch(`_ctx.index`)
expect(code).toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)

View File

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr: v-if', () => {
test('basic', () => {
expect(compile(`<div v-if="foo"></div>`).code).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
@ -18,7 +18,7 @@ describe('ssr: v-if', () => {
test('with nested content', () => {
expect(compile(`<div v-if="foo">hello<span>ok</span></div>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
@ -33,7 +33,7 @@ describe('ssr: v-if', () => {
test('v-if + v-else', () => {
expect(compile(`<div v-if="foo"/><span v-else/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
@ -48,7 +48,7 @@ describe('ssr: v-if', () => {
test('v-if + v-else-if', () => {
expect(compile(`<div v-if="foo"/><span v-else-if="bar"/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
@ -65,7 +65,7 @@ describe('ssr: v-if', () => {
test('v-if + v-else-if + v-else', () => {
expect(compile(`<div v-if="foo"/><span v-else-if="bar"/><p v-else/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
@ -97,7 +97,7 @@ describe('ssr: v-if', () => {
// single element should not wrap with fragment
expect(compile(`<template v-if="foo"><div>hi</div></template>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
@ -128,7 +128,7 @@ describe('ssr: v-if', () => {
expect(
compile(`<template v-if="foo"><div v-for="i in list"/></template>`).code
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
@ -150,7 +150,7 @@ describe('ssr: v-if', () => {
`<template v-if="foo"><div>hi</div><div>ho</div></template><div v-else/>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {

View File

@ -8,26 +8,26 @@ describe('ssr: v-model', () => {
test('<input> (text types)', () => {
expect(compileWithWrapper(`<input v-model="bar">`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttr(\\"value\\", _ctx.bar)
_ssrRenderAttr("value", _ctx.bar)
}></div>\`)
}"
`)
expect(compileWithWrapper(`<input type="email" v-model="bar">`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"email\\"\${
_ssrRenderAttr(\\"value\\", _ctx.bar)
}><input type="email"\${
_ssrRenderAttr("value", _ctx.bar)
}></div>\`)
}"
`)
@ -39,15 +39,15 @@ describe('ssr: v-model', () => {
`<select v-model="model"><option value="1"></option></select>`
).code
).toMatchInlineSnapshot(`
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><select><option value=\\"1\\"\${
}><select><option value="1"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
? _ssrLooseContain(_ctx.model, \\"1\\")
: _ssrLooseEqual(_ctx.model, \\"1\\"))) ? \\" selected\\" : \\"\\"
? _ssrLooseContain(_ctx.model, "1")
: _ssrLooseEqual(_ctx.model, "1"))) ? " selected" : ""
}></option></select></div>\`)
}"
`)
@ -57,15 +57,15 @@ describe('ssr: v-model', () => {
`<select multiple v-model="model"><option value="1" selected></option><option value="2"></option></select>`
).code
).toMatchInlineSnapshot(`
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><select multiple><option value=\\"1\\" selected></option><option value=\\"2\\"\${
}><select multiple><option value="1" selected></option><option value="2"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
? _ssrLooseContain(_ctx.model, \\"2\\")
: _ssrLooseEqual(_ctx.model, \\"2\\"))) ? \\" selected\\" : \\"\\"
? _ssrLooseContain(_ctx.model, "2")
: _ssrLooseEqual(_ctx.model, "2"))) ? " selected" : ""
}></option></select></div>\`)
}"
`)
@ -74,11 +74,11 @@ describe('ssr: v-model', () => {
compileWithWrapper(`<select multiple v-model="model"><slot/></select>`)
.code
).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple>\`)
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
_push(\`</select></div>\`)
}"
`)
@ -91,15 +91,15 @@ describe('ssr: v-model', () => {
</optgroup>
</select>`).code
).toMatchInlineSnapshot(`
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><select multiple><optgroup label=\\"foo\\"><option value=\\"bar\\"\${
}><select multiple><optgroup label="foo"><option value="bar"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
? _ssrLooseContain(_ctx.model, \\"bar\\")
: _ssrLooseEqual(_ctx.model, \\"bar\\"))) ? \\" selected\\" : \\"\\"
? _ssrLooseContain(_ctx.model, "bar")
: _ssrLooseEqual(_ctx.model, "bar"))) ? " selected" : ""
}>bar</option></optgroup></select></div>\`)
}"
`)
@ -112,11 +112,11 @@ describe('ssr: v-model', () => {
</optgroup>
</select>`).code
).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup label=\\"foo\\">\`)
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
_push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup label="foo">\`)
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
_push(\`</optgroup></select></div>\`)
}"
`)
@ -126,13 +126,13 @@ describe('ssr: v-model', () => {
expect(
compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code
).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"radio\\" value=\\"foo\\"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, \\"foo\\"))) ? \\" checked\\" : \\"\\"
}><input type="radio" value="foo"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, "foo"))) ? " checked" : ""
}></div>\`)
}"
`)
@ -141,15 +141,15 @@ describe('ssr: v-model', () => {
test('<input type="checkbox">', () => {
expect(compileWithWrapper(`<input type="checkbox" v-model="bar">`).code)
.toMatchInlineSnapshot(`
"const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\"\${
}><input type="checkbox"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, null)
: _ctx.bar)) ? \\" checked\\" : \\"\\"
: _ctx.bar)) ? " checked" : ""
}></div>\`)
}"
`)
@ -158,15 +158,15 @@ describe('ssr: v-model', () => {
compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`)
.code
).toMatchInlineSnapshot(`
"const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\" value=\\"foo\\"\${
}><input type="checkbox" value="foo"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, \\"foo\\")
: _ctx.bar)) ? \\" checked\\" : \\"\\"
? _ssrLooseContain(_ctx.bar, "foo")
: _ctx.bar)) ? " checked" : ""
}></div>\`)
}"
`)
@ -176,13 +176,13 @@ describe('ssr: v-model', () => {
`<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">`
).code
).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? \\" checked\\" : \\"\\"
}><input type="checkbox"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? " checked" : ""
}></div>\`)
}"
`)
@ -192,13 +192,13 @@ describe('ssr: v-model', () => {
`<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">`
).code
).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, \\"foo\\"))) ? \\" checked\\" : \\"\\"
}><input type="checkbox"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, "foo"))) ? " checked" : ""
}></div>\`)
}"
`)
@ -207,7 +207,7 @@ describe('ssr: v-model', () => {
test('<textarea>', () => {
expect(compileWithWrapper(`<textarea v-model="foo">bar</textarea>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
@ -222,13 +222,13 @@ describe('ssr: v-model', () => {
test('<input :type="x">', () => {
expect(compileWithWrapper(`<input :type="x" v-model="foo">`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttr(\\"type\\", _ctx.x)
_ssrRenderAttr("type", _ctx.x)
}\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, null)
}></div>\`)
@ -238,33 +238,33 @@ describe('ssr: v-model', () => {
expect(
compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code
).toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttr(\\"type\\", _ctx.x)
_ssrRenderAttr("type", _ctx.x)
}\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, \\"bar\\")
} value=\\"bar\\"></div>\`)
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, "bar")
} value="bar"></div>\`)
}"
`)
expect(
compileWithWrapper(`<input :type="x" v-model="foo" :value="bar">`).code
).toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttr(\\"type\\", _ctx.x)
_ssrRenderAttr("type", _ctx.x)
}\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, _ctx.bar)
}\${
_ssrRenderAttr(\\"value\\", _ctx.bar)
_ssrRenderAttr("value", _ctx.bar)
}></div>\`)
}"
`)
@ -273,8 +273,8 @@ describe('ssr: v-model', () => {
test('<input v-bind="obj">', () => {
expect(compileWithWrapper(`<input v-bind="obj" v-model="foo">`).code)
.toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0
@ -291,8 +291,8 @@ describe('ssr: v-model', () => {
compileWithWrapper(`<input id="x" v-bind="obj" v-model="foo" class="y">`)
.code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0
@ -300,7 +300,7 @@ describe('ssr: v-model', () => {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttrs((_temp0 = _mergeProps({ id: \\"x\\" }, _ctx.obj, { class: \\"y\\" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
_ssrRenderAttrs((_temp0 = _mergeProps({ id: "x" }, _ctx.obj, { class: "y" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
}></div>\`)
}"
`)

View File

@ -7,12 +7,12 @@ function compileWithWrapper(src: string) {
describe('ssr: v-show', () => {
test('basic as root', () => {
expect(compile(`<div v-show="foo"/>`).code).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_mergeProps({
style: (_ctx.foo) ? null : { display: \\"none\\" }
style: (_ctx.foo) ? null : { display: "none" }
}, _attrs))}></div>\`)
}"
`)
@ -21,14 +21,14 @@ describe('ssr: v-show', () => {
test('basic', () => {
expect(compileWithWrapper(`<div v-show="foo"/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><div style=\\"\${
_ssrRenderStyle((_ctx.foo) ? null : { display: \\"none\\" })
}\\"></div></div>\`)
}><div style="\${
_ssrRenderStyle((_ctx.foo) ? null : { display: "none" })
}"></div></div>\`)
}"
`)
})
@ -36,17 +36,17 @@ describe('ssr: v-show', () => {
test('with static style', () => {
expect(compileWithWrapper(`<div style="color:red" v-show="foo"/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><div style=\\"\${
}><div style="\${
_ssrRenderStyle([
{\\"color\\":\\"red\\"},
(_ctx.foo) ? null : { display: \\"none\\" }
{"color":"red"},
(_ctx.foo) ? null : { display: "none" }
])
}\\"></div></div>\`)
}"></div></div>\`)
}"
`)
})
@ -55,17 +55,17 @@ describe('ssr: v-show', () => {
expect(
compileWithWrapper(`<div :style="{ color: 'red' }" v-show="foo"/>`).code
).toMatchInlineSnapshot(`
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><div style=\\"\${
}><div style="\${
_ssrRenderStyle([
{ color: 'red' },
(_ctx.foo) ? null : { display: \\"none\\" }
(_ctx.foo) ? null : { display: "none" }
])
}\\"></div></div>\`)
}"></div></div>\`)
}"
`)
})
@ -76,18 +76,18 @@ describe('ssr: v-show', () => {
`<div style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><div style=\\"\${
}><div style="\${
_ssrRenderStyle([
{\\"color\\":\\"red\\"},
{"color":"red"},
{ fontSize: 14 },
(_ctx.foo) ? null : { display: \\"none\\" }
(_ctx.foo) ? null : { display: "none" }
])
}\\"></div></div>\`)
}"></div></div>\`)
}"
`)
})
@ -98,8 +98,8 @@ describe('ssr: v-show', () => {
`<div v-bind="baz" style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
@ -107,9 +107,9 @@ describe('ssr: v-show', () => {
}><div\${
_ssrRenderAttrs(_mergeProps(_ctx.baz, {
style: [
{\\"color\\":\\"red\\"},
{"color":"red"},
{ fontSize: 14 },
(_ctx.foo) ? null : { display: \\"none\\" }
(_ctx.foo) ? null : { display: "none" }
]
}))
}></div></div>\`)

View File

@ -1,6 +1,6 @@
{
"name": "@vue/compiler-ssr",
"version": "3.4.0-alpha.3",
"version": "3.4.0-alpha.4",
"description": "@vue/compiler-ssr",
"main": "dist/compiler-ssr.cjs.js",
"types": "dist/compiler-ssr.d.ts",

View File

@ -11,7 +11,9 @@ import {
h,
SlotsType,
Slots,
VNode
VNode,
withKeys,
withModifiers
} from 'vue'
import { describe, expectType, IsUnion } from './utils'
@ -1497,6 +1499,12 @@ describe('should work when props type is incompatible with setup returned type '
expectType<SizeType>(CompA.$props.size)
})
describe('withKeys and withModifiers as pro', () => {
const onKeydown = withKeys(e => {}, [''])
const onClick = withModifiers(e => {}, [''])
;<input onKeydown={onKeydown} onClick={onClick} />
})
import {
DefineComponent,
ComponentOptionsMixin,

View File

@ -45,7 +45,7 @@ Bar.emits = {
Bar.emits = { baz: () => void 0 }
// TSX
expectType<JSX.Element>(<Bar foo={1} />)
expectType<JSX.Element>(<Bar foo={1} onUpdate={() => {}} />)
// @ts-expect-error
;<Foo />
// @ts-expect-error

View File

@ -62,3 +62,31 @@ describe('should unwrap tuple correctly', () => {
const reactiveTuple = reactive(tuple)
expectType<Ref<number>>(reactiveTuple[0])
})
describe('should unwrap Map correctly', () => {
const map = reactive(new Map<string, Ref<number>>())
expectType<Ref<number>>(map.get('a')!)
const map2 = reactive(new Map<string, { wrap: Ref<number> }>())
expectType<number>(map2.get('a')!.wrap)
const wm = reactive(new WeakMap<object, Ref<number>>())
expectType<Ref<number>>(wm.get({})!)
const wm2 = reactive(new WeakMap<object, { wrap: Ref<number> }>())
expectType<number>(wm2.get({})!.wrap)
})
describe('should unwrap Set correctly', () => {
const set = reactive(new Set<Ref<number>>())
expectType<Set<Ref<number>>>(set)
const set2 = reactive(new Set<{ wrap: Ref<number> }>())
expectType<Set<{ wrap: number }>>(set2)
const ws = reactive(new WeakSet<Ref<number>>())
expectType<WeakSet<Ref<number>>>(ws)
const ws2 = reactive(new WeakSet<{ wrap: Ref<number> }>())
expectType<WeakSet<{ wrap: number }>>(ws2)
})

View File

@ -1,6 +1,6 @@
{
"name": "@vue/reactivity",
"version": "3.4.0-alpha.3",
"version": "3.4.0-alpha.4",
"description": "@vue/reactivity",
"main": "index.js",
"module": "dist/reactivity.esm-bundler.js",

View File

@ -8,7 +8,7 @@ import {
import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants'
import { capitalize, hasOwn, hasChanged, toRawType, isMap } from '@vue/shared'
export type CollectionTypes = IterableCollections | WeakCollections
type CollectionTypes = IterableCollections | WeakCollections
type IterableCollections = Map<any, any> | Set<any>
type WeakCollections = WeakMap<any, any> | WeakSet<any>

View File

@ -16,7 +16,6 @@ import {
isShallow
} from './reactive'
import type { ShallowReactiveMarker } from './reactive'
import { CollectionTypes } from './collectionHandlers'
import { createDep, Dep } from './dep'
import { ComputedRefImpl } from './computed'
import { getDepFromReactive } from './reactiveEffect'
@ -505,16 +504,23 @@ export type UnwrapRef<T> = T extends ShallowRef<infer V>
export type UnwrapRefSimple<T> = T extends
| Function
| CollectionTypes
| BaseTypes
| Ref
| RefUnwrapBailTypes[keyof RefUnwrapBailTypes]
| { [RawSymbol]?: true }
? T
: T extends ReadonlyArray<any>
? { [K in keyof T]: UnwrapRefSimple<T[K]> }
: T extends object & { [ShallowReactiveMarker]?: never }
? {
[P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]>
}
: T
: T extends Map<infer K, infer V>
? Map<K, UnwrapRefSimple<V>>
: T extends WeakMap<infer K, infer V>
? WeakMap<K, UnwrapRefSimple<V>>
: T extends Set<infer V>
? Set<UnwrapRefSimple<V>>
: T extends WeakSet<infer V>
? WeakSet<UnwrapRefSimple<V>>
: T extends ReadonlyArray<any>
? { [K in keyof T]: UnwrapRefSimple<T[K]> }
: T extends object & { [ShallowReactiveMarker]?: never }
? {
[P in keyof T]: P extends symbol ? T[P] : UnwrapRef<T[P]>
}
: T

View File

@ -282,6 +282,56 @@ describe('component props', () => {
expect(root.innerHTML).toBe('<div id="b">2</div>')
})
describe('validator', () => {
test('validator should be called with two arguments', async () => {
const mockFn = vi.fn((...args: any[]) => true)
const Comp = defineComponent({
props: {
foo: {
type: Number,
validator: (value, props) => mockFn(value, props)
},
bar: {
type: Number
}
},
template: `<div />`
})
// Note this one is using the main Vue render so it can compile template
// on the fly
const root = document.createElement('div')
domRender(h(Comp, { foo: 1, bar: 2 }), root)
expect(mockFn).toHaveBeenCalledWith(1, { foo: 1, bar: 2 })
})
test('validator should not be able to mutate other props', async () => {
const mockFn = vi.fn((...args: any[]) => true)
const Comp = defineComponent({
props: {
foo: {
type: Number,
validator: (value, props) => !!(props.bar = 1)
},
bar: {
type: Number,
validator: value => mockFn(value)
}
},
template: `<div />`
})
// Note this one is using the main Vue render so it can compile template
// on the fly
const root = document.createElement('div')
domRender(h(Comp, { foo: 1, bar: 2 }), root)
expect(
`Set operation on key "bar" failed: target is readonly.`
).toHaveBeenWarnedLast()
expect(mockFn).toHaveBeenCalledWith(2)
})
})
test('warn props mutation', () => {
let instance: ComponentInternalInstance
let setupProps: any

View File

@ -294,7 +294,7 @@ describe('SSR hydration', () => {
const teleportHtml = ctx.teleports!['#teleport2']
expect(teleportHtml).toMatchInlineSnapshot(
'"<span>foo</span><span class=\\"foo\\"></span><!--teleport anchor--><span>foo2</span><span class=\\"foo2\\"></span><!--teleport anchor-->"'
`"<span>foo</span><span class="foo"></span><!--teleport anchor--><span>foo2</span><span class="foo2"></span><!--teleport anchor-->"`
)
teleportContainer.innerHTML = teleportHtml
@ -331,7 +331,7 @@ describe('SSR hydration', () => {
msg.value = 'bar'
await nextTick()
expect(teleportContainer.innerHTML).toMatchInlineSnapshot(
'"<span>bar</span><span class=\\"bar\\"></span><!--teleport anchor--><span>bar2</span><span class=\\"bar2\\"></span><!--teleport anchor-->"'
`"<span>bar</span><span class="bar"></span><!--teleport anchor--><span>bar2</span><span class="bar2"></span><!--teleport anchor-->"`
)
})
@ -354,7 +354,7 @@ describe('SSR hydration', () => {
const ctx: SSRContext = {}
const mainHtml = await renderToString(h(Comp), ctx)
expect(mainHtml).toMatchInlineSnapshot(
'"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class=\\"foo\\"></span><!--teleport end--><div class=\\"foo2\\">bar</div><!--]-->"'
`"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class="foo"></span><!--teleport end--><div class="foo2">bar</div><!--]-->"`
)
const teleportHtml = ctx.teleports!['#teleport3']
@ -393,7 +393,7 @@ describe('SSR hydration', () => {
msg.value = 'bar'
await nextTick()
expect(container.innerHTML).toMatchInlineSnapshot(
'"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class=\\"bar\\"></span><!--teleport end--><div class=\\"bar2\\">bar</div><!--]-->"'
`"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class="bar"></span><!--teleport end--><div class="bar2">bar</div><!--]-->"`
)
})

View File

@ -1,6 +1,6 @@
{
"name": "@vue/runtime-core",
"version": "3.4.0-alpha.3",
"version": "3.4.0-alpha.4",
"description": "@vue/runtime-core",
"main": "index.js",
"module": "dist/runtime-core.esm-bundler.js",

View File

@ -50,7 +50,8 @@ import {
ObjectEmitsOptions,
EmitFn,
emit,
normalizeEmitsOptions
normalizeEmitsOptions,
EmitsToProps
} from './componentEmits'
import {
EMPTY_OBJ,
@ -131,7 +132,7 @@ export interface FunctionalComponent<
> extends ComponentInternalOptions {
// use of any here is intentional so it can be a valid JSX Element constructor
(
props: P,
props: P & EmitsToProps<E>,
ctx: Omit<SetupContext<E, IfAny<S, {}, SlotsType<S>>>, 'expose'>
): any
props?: ComponentPropsOptions<P>

View File

@ -2,7 +2,8 @@ import {
toRaw,
shallowReactive,
trigger,
TriggerOpTypes
TriggerOpTypes,
shallowReadonly
} from '@vue/reactivity'
import {
EMPTY_OBJ,
@ -57,7 +58,7 @@ export interface PropOptions<T = any, D = T> {
type?: PropType<T> | true | null
required?: boolean
default?: D | DefaultFactory<D> | null | undefined | object
validator?(value: unknown): boolean
validator?(value: unknown, props: Data): boolean
/**
* @internal
*/
@ -634,6 +635,7 @@ function validateProps(
key,
resolvedValues[key],
opt,
__DEV__ ? shallowReadonly(resolvedValues) : resolvedValues,
!hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key))
)
}
@ -646,6 +648,7 @@ function validateProp(
name: string,
value: unknown,
prop: PropOptions,
props: Data,
isAbsent: boolean
) {
const { type, required, validator, skipCheck } = prop
@ -675,7 +678,7 @@ function validateProp(
}
}
// custom validator
if (validator && !validator(value)) {
if (validator && !validator(value, props)) {
warn('Invalid prop: custom validator check failed for prop "' + name + '".')
}
}

View File

@ -504,7 +504,12 @@ function createSuspenseBoundary(
if (delayEnter) {
activeBranch!.transition!.afterLeave = () => {
if (pendingId === suspense.pendingId) {
move(pendingBranch!, container, anchor, MoveType.ENTER)
move(
pendingBranch!,
container,
next(activeBranch!),
MoveType.ENTER
)
queuePostFlushCb(effects)
}
}
@ -577,7 +582,6 @@ function createSuspenseBoundary(
// invoke @fallback event
triggerEvent(vnode, 'onFallback')
const anchor = next(activeBranch!)
const mountFallback = () => {
if (!suspense.isInFallback) {
return
@ -587,7 +591,7 @@ function createSuspenseBoundary(
null,
fallbackVNode,
container,
anchor,
next(activeBranch!),
parentComponent,
null, // fallback tree will not have suspense context
isSVG,

View File

@ -11,9 +11,9 @@ export function initCustomFormatter() {
}
const vueStyle = { style: 'color:#3ba776' }
const numberStyle = { style: 'color:#0b1bc9' }
const stringStyle = { style: 'color:#b62e24' }
const keywordStyle = { style: 'color:#9d288c' }
const numberStyle = { style: 'color:#1677ff' }
const stringStyle = { style: 'color:#f5222d' }
const keywordStyle = { style: 'color:#eb2f96' }
// custom formatter for Chrome
// https://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html

View File

@ -291,6 +291,15 @@ describe('runtime-dom: props patching', () => {
expect(el.value).toBe('baz')
})
// #8780
test('embedded tag with width and height', () => {
// Width and height of some embedded element such as img、video、source、canvas
// must be set as attribute
const el = document.createElement('img')
patchProp(el, 'width', null, '24px')
expect(el.getAttribute('width')).toBe('24px')
})
test('translate attribute', () => {
const el = document.createElement('div')
patchProp(el, 'translate', null, 'no')

View File

@ -1,6 +1,6 @@
{
"name": "@vue/runtime-dom",
"version": "3.4.0-alpha.3",
"version": "3.4.0-alpha.4",
"description": "@vue/runtime-dom",
"main": "index.js",
"module": "dist/runtime-dom.esm-bundler.js",

View File

@ -32,14 +32,22 @@ const modifierGuards: Record<
/**
* @private
*/
export const withModifiers = (fn: Function, modifiers: string[]) => {
return (event: Event, ...args: unknown[]) => {
for (let i = 0; i < modifiers.length; i++) {
const guard = modifierGuards[modifiers[i]]
if (guard && guard(event, modifiers)) return
}
return fn(event, ...args)
}
export const withModifiers = <
T extends (event: Event, ...args: unknown[]) => any
>(
fn: T & { _withMods?: T },
modifiers: string[]
) => {
return (
fn._withMods ||
(fn._withMods = ((event, ...args) => {
for (let i = 0; i < modifiers.length; i++) {
const guard = modifierGuards[modifiers[i]]
if (guard && guard(event, modifiers)) return
}
return fn(event, ...args)
}) as T)
)
}
// Kept for 2.x compat.
@ -57,7 +65,10 @@ const keyNames: Record<string, string | string[]> = {
/**
* @private
*/
export const withKeys = (fn: Function, modifiers: string[]) => {
export const withKeys = <T extends (event: KeyboardEvent) => any>(
fn: T & { _withKeys?: T },
modifiers: string[]
) => {
let globalKeyCodes: LegacyConfig['keyCodes']
let instance: ComponentInternalInstance | null = null
if (__COMPAT__) {
@ -77,40 +88,43 @@ export const withKeys = (fn: Function, modifiers: string[]) => {
}
}
return (event: KeyboardEvent) => {
if (!('key' in event)) {
return
}
return (
fn._withKeys ||
(fn._withKeys = (event => {
if (!('key' in event)) {
return
}
const eventKey = hyphenate(event.key)
if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
return fn(event)
}
if (__COMPAT__) {
const keyCode = String(event.keyCode)
if (
compatUtils.isCompatEnabled(
DeprecationTypes.V_ON_KEYCODE_MODIFIER,
instance
) &&
modifiers.some(mod => mod == keyCode)
) {
const eventKey = hyphenate(event.key)
if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
return fn(event)
}
if (globalKeyCodes) {
for (const mod of modifiers) {
const codes = globalKeyCodes[mod]
if (codes) {
const matches = isArray(codes)
? codes.some(code => String(code) === keyCode)
: String(codes) === keyCode
if (matches) {
return fn(event)
if (__COMPAT__) {
const keyCode = String(event.keyCode)
if (
compatUtils.isCompatEnabled(
DeprecationTypes.V_ON_KEYCODE_MODIFIER,
instance
) &&
modifiers.some(mod => mod == keyCode)
) {
return fn(event)
}
if (globalKeyCodes) {
for (const mod of modifiers) {
const codes = globalKeyCodes[mod]
if (codes) {
const matches = isArray(codes)
? codes.some(code => String(code) === keyCode)
: String(codes) === keyCode
if (matches) {
return fn(event)
}
}
}
}
}
}
}
}) as T)
)
}

View File

@ -6,7 +6,12 @@ import { patchEvent } from './modules/events'
import { isOn, isString, isFunction, isModelListener } from '@vue/shared'
import { RendererOptions } from '@vue/runtime-core'
const nativeOnRE = /^on[a-z]/
const isNativeOn = (key: string) =>
key.charCodeAt(0) === 111 /* o */ &&
key.charCodeAt(1) === 110 /* n */ &&
// lowercase letter
key.charCodeAt(2) > 96 &&
key.charCodeAt(2) < 123
type DOMRendererOptions = RendererOptions<Node, Element>
@ -73,7 +78,7 @@ function shouldSetAsProp(
return true
}
// or native onclick with function values
if (key in el && nativeOnRE.test(key) && isFunction(value)) {
if (key in el && isNativeOn(key) && isFunction(value)) {
return true
}
return false
@ -105,8 +110,19 @@ function shouldSetAsProp(
return false
}
// #8780 the width or heigth of embedded tags must be set as attribute
if (key === 'width' || key === 'height') {
const tag = el.tagName
return !(
tag === 'IMG' ||
tag === 'VIDEO' ||
tag === 'CANVAS' ||
tag === 'SOURCE'
)
}
// native onclick with string value, must be set as attribute
if (nativeOnRE.test(key) && isString(value)) {
if (isNativeOn(key) && isString(value)) {
return false
}

View File

@ -17,7 +17,10 @@ import {
renderSlot,
onErrorCaptured,
onServerPrefetch,
getCurrentInstance
getCurrentInstance,
reactive,
computed,
createSSRApp
} from 'vue'
import { escapeHtml } from '@vue/shared'
import { renderToString } from '../src/renderToString'
@ -1140,5 +1143,47 @@ function testRender(type: string, render: typeof renderToString) {
expect(renderError).toBe(null)
expect((capturedError as unknown as Error).message).toBe('An error')
})
test('computed reactivity during SSR with onServerPrefetch', async () => {
const store = {
// initial state could be hydrated
state: reactive({ items: null as null | string[] }),
// pretend to fetch some data from an api
async fetchData() {
this.state.items = ['hello', 'world']
}
}
const getterSpy = vi.fn()
const App = defineComponent(() => {
const msg = computed(() => {
getterSpy()
return store.state.items?.join(' ')
})
// If msg value is falsy then we are either in ssr context or on the client
// and the initial state was not modified/hydrated.
// In both cases we need to fetch data.
onServerPrefetch(() => store.fetchData())
// simulate the read from a composable (e.g. filtering a list of results)
msg.value
return () => h('div', null, msg.value)
})
const app = createSSRApp(App)
// in real world serve this html and append store state for hydration on client
const html = await renderToString(app)
expect(html).toMatch('hello world')
// should only be called twice since access should be cached
// during the render phase
expect(getterSpy).toHaveBeenCalledTimes(2)
})
})
}

View File

@ -33,7 +33,6 @@ test('computed reactivity during SSR', async () => {
// In both cases we need to fetch data.
if (!msg.value) await store.fetchData()
expect(msg.value).toBe('hello world')
return () => h('div', null, msg.value + msg.value + msg.value)
})

View File

@ -1,6 +1,6 @@
{
"name": "@vue/server-renderer",
"version": "3.4.0-alpha.3",
"version": "3.4.0-alpha.4",
"description": "@vue/server-renderer",
"main": "index.js",
"module": "dist/server-renderer.esm-bundler.js",

View File

@ -144,7 +144,10 @@ function renderComponentSubTree(
// perf: enable caching of computed getters during render
// since there cannot be state mutations during render.
for (const e of instance.scope.effects) {
if (e.computed) e.computed._cacheable = true
if (e.computed) {
e.computed._dirty = true
e.computed._cacheable = true
}
}
const ssrRender = instance.ssrRender || comp.ssrRender

View File

@ -13,7 +13,7 @@
"vite": "^5.0.0"
},
"dependencies": {
"@vue/repl": "^2.7.0",
"@vue/repl": "^3.0.0",
"file-saver": "^2.0.5",
"jszip": "^3.10.1",
"vue": "workspace:*"

View File

@ -1,8 +1,22 @@
<script setup lang="ts">
import Header from './Header.vue'
import { Repl, ReplStore, SFCOptions } from '@vue/repl'
import Monaco from '@vue/repl/monaco-editor'
import type Monaco from '@vue/repl/monaco-editor'
import type CodeMirror from '@vue/repl/codemirror-editor'
import { ref, watchEffect, onMounted } from 'vue'
import { shallowRef } from 'vue'
const EditorComponent = shallowRef<typeof Monaco | typeof CodeMirror>()
if (import.meta.env.DEV) {
import('@vue/repl/codemirror-editor').then(
mod => (EditorComponent.value = mod.default)
)
} else {
import('@vue/repl/monaco-editor').then(
mod => (EditorComponent.value = mod.default)
)
}
const setVH = () => {
document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
@ -97,8 +111,9 @@ onMounted(() => {
@toggle-ssr="toggleSSR"
/>
<Repl
v-if="EditorComponent"
:theme="theme"
:editor="Monaco"
:editor="EditorComponent"
@keydown.ctrl.s.prevent
@keydown.meta.s.prevent
:ssr="useSSRMode"

View File

@ -1,6 +1,5 @@
import { createApp } from 'vue'
import App from './App.vue'
import '@vue/repl/style.css'
// @ts-expect-error Custom window property
window.VUE_DEVTOOLS_CONFIG = {

View File

@ -48,6 +48,8 @@ function copyVuePlugin(): Plugin {
})
}
copyFile(`../vue/dist/vue.esm-browser.js`)
copyFile(`../vue/dist/vue.esm-browser.prod.js`)
copyFile(`../vue/dist/vue.runtime.esm-browser.js`)
copyFile(`../vue/dist/vue.runtime.esm-browser.prod.js`)
copyFile(`../server-renderer/dist/server-renderer.esm-browser.js`)

View File

@ -1,62 +1,62 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: codeframe > line in middle 1`] = `
"2 | <template key=\\"one\\"></template>
"2 | <template key="one"></template>
3 | <ul>
4 | <li v-for=\\"foobar\\">hi</li>
4 | <li v-for="foobar">hi</li>
| ^^^^^^^^^^^^^^
5 | </ul>
6 | <template key=\\"two\\"></template>"
6 | <template key="two"></template>"
`;
exports[`compiler: codeframe > line near bottom 1`] = `
"4 | <li v-for=\\"foobar\\">hi</li>
"4 | <li v-for="foobar">hi</li>
5 | </ul>
6 | <template key=\\"two\\"></template>
6 | <template key="two"></template>
| ^^^^^^^^^
7 | </div>"
`;
exports[`compiler: codeframe > line near top 1`] = `
"1 | <div>
2 | <template key=\\"one\\"></template>
2 | <template key="one"></template>
| ^^^^^^^^^
3 | <ul>
4 | <li v-for=\\"foobar\\">hi</li>"
4 | <li v-for="foobar">hi</li>"
`;
exports[`compiler: codeframe > multi-line highlights 1`] = `
"1 | <div attr=\\"some
"1 | <div attr="some
| ^^^^^^^^^^
2 | multiline
| ^^^^^^^^^^^
3 | attr
| ^^^^
4 | \\">
4 | ">
| ^"
`;
exports[`compiler: codeframe > newline sequences - unix 1`] = `
"8 | <input name=\\"email\\" type=\\"text\\"/>
"8 | <input name="email" type="text"/>
9 | </div>
10 | <div id=\\"hook\\">
10 | <div id="hook">
| ^^^^^^^^^^^^^^^
11 | <label for=\\"password\\">Password</label>
11 | <label for="password">Password</label>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | <input name=\\"password\\" type=\\"password\\"/>
12 | <input name="password" type="password"/>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | </div>
| ^^^^^^^^^^^^"
`;
exports[`compiler: codeframe > newline sequences - windows 1`] = `
"8 | <input name=\\"email\\" type=\\"text\\"/>
"8 | <input name="email" type="text"/>
9 | </div>
10 | <div id=\\"hook\\">
10 | <div id="hook">
| ^^^^^^^^^^^^^^^
11 | <label for=\\"password\\">Password</label>
11 | <label for="password">Password</label>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | <input name=\\"password\\" type=\\"password\\"/>
12 | <input name="password" type="password"/>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | </div>
| ^^^^^^^^^^^^"

View File

@ -92,7 +92,7 @@ describe('toDisplayString', () => {
expect(toDisplayString(div)).toMatch('[object HTMLDivElement]')
expect(toDisplayString({ div })).toMatchInlineSnapshot(`
"{
\\"div\\": \\"[object HTMLDivElement]\\"
"div": "[object HTMLDivElement]"
}"
`)
})
@ -106,28 +106,28 @@ describe('toDisplayString', () => {
expect(toDisplayString(m)).toMatchInlineSnapshot(`
"{
\\"Map(2)\\": {
\\"1 =>\\": \\"foo\\",
\\"[object Object] =>\\": {
\\"foo\\": \\"bar\\",
\\"qux\\": 2
"Map(2)": {
"1 =>": "foo",
"[object Object] =>": {
"foo": "bar",
"qux": 2
}
}
}"
`)
expect(toDisplayString(s)).toMatchInlineSnapshot(`
"{
\\"Set(3)\\": [
"Set(3)": [
1,
{
\\"foo\\": \\"bar\\"
"foo": "bar"
},
{
\\"Map(2)\\": {
\\"1 =>\\": \\"foo\\",
\\"[object Object] =>\\": {
\\"foo\\": \\"bar\\",
\\"qux\\": 2
"Map(2)": {
"1 =>": "foo",
"[object Object] =>": {
"foo": "bar",
"qux": 2
}
}
}
@ -142,27 +142,27 @@ describe('toDisplayString', () => {
})
).toMatchInlineSnapshot(`
"{
\\"m\\": {
\\"Map(2)\\": {
\\"1 =>\\": \\"foo\\",
\\"[object Object] =>\\": {
\\"foo\\": \\"bar\\",
\\"qux\\": 2
"m": {
"Map(2)": {
"1 =>": "foo",
"[object Object] =>": {
"foo": "bar",
"qux": 2
}
}
},
\\"s\\": {
\\"Set(3)\\": [
"s": {
"Set(3)": [
1,
{
\\"foo\\": \\"bar\\"
"foo": "bar"
},
{
\\"Map(2)\\": {
\\"1 =>\\": \\"foo\\",
\\"[object Object] =>\\": {
\\"foo\\": \\"bar\\",
\\"qux\\": 2
"Map(2)": {
"1 =>": "foo",
"[object Object] =>": {
"foo": "bar",
"qux": 2
}
}
}

View File

@ -1,6 +1,6 @@
{
"name": "@vue/shared",
"version": "3.4.0-alpha.3",
"version": "3.4.0-alpha.4",
"description": "internal utils shared across @vue packages",
"main": "index.js",
"module": "dist/shared.esm-bundler.js",

View File

@ -12,8 +12,11 @@ export const NOOP = () => {}
*/
export const NO = () => false
const onRE = /^on[^a-z]/
export const isOn = (key: string) => onRE.test(key)
export const isOn = (key: string) =>
key.charCodeAt(0) === 111 /* o */ &&
key.charCodeAt(1) === 110 /* n */ &&
// uppercase letter
(key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97)
export const isModelListener = (key: string) => key.startsWith('onUpdate:')

View File

@ -1,5 +1,6 @@
body {
margin: 0;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--bg: #1D1F21;
--border: #333;

Some files were not shown because too many files have changed in this diff Show More