Merge branch 'vuejs:main' into fix-KeepAlive-Comments

Author: amirkian007

CHANGELOG.md

@@ -1,3 +1,16 @@
+## [3.2.37](https://github.com/vuejs/core/compare/v3.2.36...v3.2.37) (2022-06-06)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** improve css v-bind parsing ([e60244b](https://github.com/vuejs/core/commit/e60244bcdf0b386de1560ff7c205ae0870bab355)), closes [#6022](https://github.com/vuejs/core/issues/6022)
+* **runtime-core:** hydrate Static vnode ([#6015](https://github.com/vuejs/core/issues/6015)) ([11e17a1](https://github.com/vuejs/core/commit/11e17a1a29cf3d0b37628241d63ff3e8d8525f95)), closes [#6008](https://github.com/vuejs/core/issues/6008)
+* **sfc:** avoid auto name inference leading to unwanted recursion ([9734b31](https://github.com/vuejs/core/commit/9734b31c312244a2b5c5cf83c75d7b34076a0c4b)), closes [#5965](https://github.com/vuejs/core/issues/5965) [#6027](https://github.com/vuejs/core/issues/6027) [#6029](https://github.com/vuejs/core/issues/6029)
+* **ssr:** ensure app  can be unmounted when created with createSSRApp() ([#5992](https://github.com/vuejs/core/issues/5992)) ([d4d3319](https://github.com/vuejs/core/commit/d4d3319c1be16dc9a046b2c5521096debc205f25)), closes [#5990](https://github.com/vuejs/core/issues/5990)
+* **ssr:** hydration for transition wrapper components with empty slot content ([#5995](https://github.com/vuejs/core/issues/5995)) ([eb22a62](https://github.com/vuejs/core/commit/eb22a62798d845a8756b0a73b68afdd874feda59)), closes [#5991](https://github.com/vuejs/core/issues/5991)
+
+
+
 ## [3.2.36](https://github.com/vuejs/core/compare/v3.2.35...v3.2.36) (2022-05-23)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.2.36",
+  "version": "3.2.37",
   "packageManager": "[email protected]",
   "scripts": {
     "dev": "node scripts/dev.js",

packages/compiler-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.2.36",
+  "version": "3.2.37",
   "description": "@vue/compiler-core",
   "main": "index.js",
   "module": "dist/compiler-core.esm-bundler.js",
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-core#readme",
   "dependencies": {
-    "@vue/shared": "3.2.36",
+    "@vue/shared": "3.2.37",
     "@babel/parser": "^7.16.4",
     "estree-walker": "^2.0.2",
     "source-map": "^0.6.1"

packages/compiler-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.2.36",
+  "version": "3.2.37",
   "description": "@vue/compiler-dom",
   "main": "index.js",
   "module": "dist/compiler-dom.esm-bundler.js",
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-dom#readme",
   "dependencies": {
-    "@vue/shared": "3.2.36",
-    "@vue/compiler-core": "3.2.36"
+    "@vue/shared": "3.2.37",
+    "@vue/compiler-core": "3.2.37"
   }
 }

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`SFC analyze <script> bindings auto name inference basic 1`] = `
 "export default {
-  name: 'FooBar',
+  __name: 'FooBar',
   setup(__props, { expose }) {
   expose();
 const a = 1

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -1650,7 +1650,7 @@ describe('SFC analyze <script> bindings', () => {
         }
       )
       expect(content).toMatch(`export default {
-  name: 'FooBar'`)
+  __name: 'FooBar'`)
       assertCode(content)
     })
 

packages/compiler-sfc/__tests__/cssVars.spec.ts

@@ -1,4 +1,4 @@
-import { compileStyle } from '../src'
+import { compileStyle, parse } from '../src'
 import { mockId, compileSFCScript, assertCode } from './utils'
 
 describe('CSS vars injection', () => {
@@ -231,5 +231,21 @@ describe('CSS vars injection', () => {
 })`)
       assertCode(content)
     })
+
+    // #6022
+    test('should be able to parse incomplete expressions', () => {
+      const {
+        descriptor: { cssVars }
+      } = parse(
+        `<script setup>let xxx = 1</script>
+        <style scoped>
+        label {
+          font-weight: v-bind("count.toString(");
+          font-weight: v-bind(xxx);
+        }
+        </style>`
+      )
+      expect(cssVars).toMatchObject([`count.toString(`, `xxx`])
+    })
   })
 })

packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.2.36",
+  "version": "3.2.37",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -33,11 +33,11 @@
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
     "@babel/parser": "^7.16.4",
-    "@vue/compiler-core": "3.2.36",
-    "@vue/compiler-dom": "3.2.36",
-    "@vue/compiler-ssr": "3.2.36",
-    "@vue/reactivity-transform": "3.2.36",
-    "@vue/shared": "3.2.36",
+    "@vue/compiler-core": "3.2.37",
+    "@vue/compiler-dom": "3.2.37",
+    "@vue/compiler-ssr": "3.2.37",
+    "@vue/reactivity-transform": "3.2.37",
+    "@vue/shared": "3.2.37",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.25.7",
     "source-map": "^0.6.1",

packages/compiler-sfc/src/compileScript.ts

@@ -1463,7 +1463,7 @@ export function compileScript(
   if (!hasDefaultExportName && filename && filename !== DEFAULT_FILENAME) {
     const match = filename.match(/([^/\\]+)\.\w+$/)
     if (match) {
-      runtimeOptions += `\n  name: '${match[1]}',`
+      runtimeOptions += `\n  __name: '${match[1]}',`
     }
   }
   if (hasInlinedSsrRenderFn) {

packages/compiler-sfc/src/cssVars.ts

@@ -12,8 +12,6 @@ import { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
 
 export const CSS_VARS_HELPER = `useCssVars`
-// match v-bind() with max 2-levels of nested parens.
-const cssVarRE = /v-bind\s*\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/g
 
 export function genCssVarsFromList(
   vars: string[],
@@ -47,22 +45,71 @@ function normalizeExpression(exp: string) {
   return exp
 }
 
+const vBindRE = /v-bind\s*\(/g
+
 export function parseCssVars(sfc: SFCDescriptor): string[] {
   const vars: string[] = []
   sfc.styles.forEach(style => {
     let match
     // ignore v-bind() in comments /* ... */
     const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '')
-    while ((match = cssVarRE.exec(content))) {
-      const variable = normalizeExpression(match[1])
-      if (!vars.includes(variable)) {
-        vars.push(variable)
+    while ((match = vBindRE.exec(content))) {
+      const start = match.index + match[0].length
+      const end = lexBinding(content, start)
+      if (end !== null) {
+        const variable = normalizeExpression(content.slice(start, end))
+        if (!vars.includes(variable)) {
+          vars.push(variable)
+        }
       }
     }
   })
   return vars
 }
 
+const enum LexerState {
+  inParens,
+  inSingleQuoteString,
+  inDoubleQuoteString
+}
+
+function lexBinding(content: string, start: number): number | null {
+  let state: LexerState = LexerState.inParens
+  let parenDepth = 0
+
+  for (let i = start; i < content.length; i++) {
+    const char = content.charAt(i)
+    switch (state) {
+      case LexerState.inParens:
+        if (char === `'`) {
+          state = LexerState.inSingleQuoteString
+        } else if (char === `"`) {
+          state = LexerState.inDoubleQuoteString
+        } else if (char === `(`) {
+          parenDepth++
+        } else if (char === `)`) {
+          if (parenDepth > 0) {
+            parenDepth--
+          } else {
+            return i
+          }
+        }
+        break
+      case LexerState.inSingleQuoteString:
+        if (char === `'`) {
+          state = LexerState.inParens
+        }
+        break
+      case LexerState.inDoubleQuoteString:
+        if (char === `"`) {
+          state = LexerState.inParens
+        }
+        break
+    }
+  }
+  return null
+}
+
 // for compileStyle
 export interface CssVarsPluginOptions {
   id: string
@@ -75,10 +122,24 @@ export const cssVarsPlugin: PluginCreator<CssVarsPluginOptions> = opts => {
     postcssPlugin: 'vue-sfc-vars',
     Declaration(decl) {
       // rewrite CSS variables
-      if (cssVarRE.test(decl.value)) {
-        decl.value = decl.value.replace(cssVarRE, (_, $1) => {
-          return `var(--${genVarName(id, normalizeExpression($1), isProd)})`
-        })
+      const value = decl.value
+      if (vBindRE.test(value)) {
+        vBindRE.lastIndex = 0
+        let transformed = ''
+        let lastIndex = 0
+        let match
+        while ((match = vBindRE.exec(value))) {
+          const start = match.index + match[0].length
+          const end = lexBinding(value, start)
+          if (end !== null) {
+            const variable = normalizeExpression(value.slice(start, end))
+            transformed +=
+              value.slice(lastIndex, match.index) +
+              `var(--${genVarName(id, variable, isProd)})`
+            lastIndex = end + 1
+          }
+        }
+        decl.value = transformed + value.slice(lastIndex)
       }
     }
   }