.github/workflows/ci.yml

@@ -80,7 +80,7 @@ jobs:
           cache: 'pnpm'
 
       - run: pnpm install
-      - run: node node_modules/puppeteer/install.js
+      - run: node node_modules/puppeteer/install.mjs
 
       - name: Run e2e tests
         run: pnpm run test-e2e

CHANGELOG.md

@@ -1,3 +1,22 @@
+## [3.3.7](https://github.com/vuejs/core/compare/v3.3.6...v3.3.7) (2023-10-24)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** avoid gen useCssVars when targeting SSR ([#6979](https://github.com/vuejs/core/issues/6979)) ([c568778](https://github.com/vuejs/core/commit/c568778ea3265d8e57f788b00864c9509bf88a4e)), closes [#6926](https://github.com/vuejs/core/issues/6926)
+* **compiler-ssr:**  proper scope analysis for ssr vnode slot fallback ([#7184](https://github.com/vuejs/core/issues/7184)) ([e09c26b](https://github.com/vuejs/core/commit/e09c26bc9bc4394c2c2d928806d382515c2676f3)), closes [#7095](https://github.com/vuejs/core/issues/7095)
+* correctly resolve types from relative paths on Windows ([#9446](https://github.com/vuejs/core/issues/9446)) ([089d36d](https://github.com/vuejs/core/commit/089d36d167dc7834065b03ca689f9b6a44eead8a)), closes [#8671](https://github.com/vuejs/core/issues/8671)
+* **hmr:** fix hmr error for hoisted children array in v-for ([7334376](https://github.com/vuejs/core/commit/733437691f70ebca8dd6cc3bc8356f5b57d4d5d8)), closes [#6978](https://github.com/vuejs/core/issues/6978) [#7114](https://github.com/vuejs/core/issues/7114)
+* **reactivity:** assigning array.length while observing a symbol property ([#7568](https://github.com/vuejs/core/issues/7568)) ([e9e2778](https://github.com/vuejs/core/commit/e9e2778e9ec5cca07c1df5f0c9b7b3595a1a3244))
+* **scheduler:** ensure jobs are in the correct order ([#7748](https://github.com/vuejs/core/issues/7748)) ([a8f6638](https://github.com/vuejs/core/commit/a8f663867b8cd2736b82204bc58756ef02441276)), closes [#7576](https://github.com/vuejs/core/issues/7576)
+* **ssr:** fix hydration mismatch for disabled teleport at component root ([#9399](https://github.com/vuejs/core/issues/9399)) ([d8990fc](https://github.com/vuejs/core/commit/d8990fc6182d1c2cf0a8eab7b35a9d04df668507)), closes [#6152](https://github.com/vuejs/core/issues/6152)
+* **Suspense:** calling hooks before the transition finishes ([#9388](https://github.com/vuejs/core/issues/9388)) ([00de3e6](https://github.com/vuejs/core/commit/00de3e61ed7a55e7d6c2e1987551d66ad0f909ff)), closes [#5844](https://github.com/vuejs/core/issues/5844) [#5952](https://github.com/vuejs/core/issues/5952)
+* **transition/ssr:** make transition appear work with SSR ([#8859](https://github.com/vuejs/core/issues/8859)) ([5ea8a8a](https://github.com/vuejs/core/commit/5ea8a8a4fab4e19a71e123e4d27d051f5e927172)), closes [#6951](https://github.com/vuejs/core/issues/6951)
+* **types:** fix ComponentCustomProps augmentation ([#9468](https://github.com/vuejs/core/issues/9468)) ([7374e93](https://github.com/vuejs/core/commit/7374e93f0281f273b90ab5a6724cc47332a01d6c)), closes [#8376](https://github.com/vuejs/core/issues/8376)
+* **types:** improve `h` overload to support union of string and component ([#5432](https://github.com/vuejs/core/issues/5432)) ([16ecb44](https://github.com/vuejs/core/commit/16ecb44c89cd8299a3b8de33cccc2e2cc36f065b)), closes [#5431](https://github.com/vuejs/core/issues/5431)
+
+
+
 ## [3.3.6](https://github.com/vuejs/core/compare/v3.3.5...v3.3.6) (2023-10-20)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.3.6",
+  "version": "3.3.7",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {
@@ -66,16 +66,16 @@
     "@rollup/plugin-replace": "^5.0.4",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/hash-sum": "^1.0.1",
-    "@types/node": "^18.18.6",
+    "@types/node": "^20.8.7",
     "@typescript-eslint/parser": "^6.8.0",
-    "@vitest/coverage-istanbul": "^0.34.4",
+    "@vitest/coverage-istanbul": "^0.34.6",
     "@vue/consolidate": "0.17.3",
     "conventional-changelog-cli": "^4.1.0",
     "enquirer": "^2.4.1",
     "esbuild": "^0.19.5",
     "esbuild-plugin-polyfill-node": "^0.3.0",
-    "eslint": "^8.51.0",
-    "eslint-plugin-jest": "^27.4.2",
+    "eslint": "^8.52.0",
+    "eslint-plugin-jest": "^27.4.3",
     "estree-walker": "^2.0.2",
     "execa": "^8.0.1",
     "jsdom": "^22.1.0",
@@ -90,21 +90,21 @@
     "prettier": "^3.0.3",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.2",
-    "puppeteer": "~21.2.1",
+    "puppeteer": "~21.4.0",
     "rimraf": "^5.0.5",
-    "rollup": "^3.29.4",
+    "rollup": "^4.1.4",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "semver": "^7.5.4",
     "serve": "^14.2.1",
     "simple-git-hooks": "^2.9.0",
     "terser": "^5.22.0",
-    "todomvc-app-css": "^2.4.2",
+    "todomvc-app-css": "^2.4.3",
     "tslib": "^2.6.2",
     "tsx": "^3.14.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.3.0",
-    "vitest": "^0.34.4"
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vitest": "^0.34.6"
   }
 }

packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts

@@ -593,5 +593,17 @@ describe('compiler: hoistStatic transform', () => {
       expect(root.hoists.length).toBe(2)
       expect(generate(root).code).toMatchSnapshot()
     })
+
+    test('clone hoisted array children in HMR mode', () => {
+      const root = transformWithHoist(`<div><span class="hi"></span></div>`, {
+        hmr: true
+      })
+      expect(root.hoists.length).toBe(2)
+      expect(root.codegenNode).toMatchObject({
+        children: {
+          content: '[..._hoisted_2]'
+        }
+      })
+    })
   })
 })

packages/compiler-core/package.json

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

packages/compiler-core/src/options.ts

@@ -256,6 +256,12 @@ export interface TransformOptions
    * needed to render inline CSS variables on component root
    */
   ssrCssVars?: string
+  /**
+   * Whether to compile the template assuming it needs to handle HMR.
+   * Some edge cases may need to generate different code for HMR to work
+   * correctly, e.g. #6938, #7138
+   */
+  hmr?: boolean
 }
 
 export interface CodegenOptions extends SharedTransformCodegenOptions {

packages/compiler-core/src/transform.ts

@@ -129,6 +129,7 @@ export function createTransformContext(
     filename = '',
     prefixIdentifiers = false,
     hoistStatic = false,
+    hmr = false,
     cacheHandlers = false,
     nodeTransforms = [],
     directiveTransforms = {},
@@ -155,6 +156,7 @@ export function createTransformContext(
     selfName: nameMatch && capitalize(camelize(nameMatch[1])),
     prefixIdentifiers,
     hoistStatic,
+    hmr,
     cacheHandlers,
     nodeTransforms,
     directiveTransforms,

packages/compiler-core/src/transforms/hoistStatic.ts

@@ -140,9 +140,16 @@ function walk(
     node.codegenNode.type === NodeTypes.VNODE_CALL &&
     isArray(node.codegenNode.children)
   ) {
-    node.codegenNode.children = context.hoist(
+    const hoisted = context.hoist(
       createArrayExpression(node.codegenNode.children)
     )
+    // #6978, #7138, #7114
+    // a hoisted children array inside v-for can caused HMR errors since
+    // it might be mutated when mounting the v-for list
+    if (context.hmr) {
+      hoisted.content = `[...${hoisted.content}]`
+    }
+    node.codegenNode.children = hoisted
   }
 }
 

packages/compiler-core/src/transforms/vSlot.ts

@@ -100,11 +100,12 @@ export const trackVForSlotScopes: NodeTransform = (node, context) => {
 
 export type SlotFnBuilder = (
   slotProps: ExpressionNode | undefined,
+  vForExp: ExpressionNode | undefined,
   slotChildren: TemplateChildNode[],
   loc: SourceLocation
 ) => FunctionExpression
 
-const buildClientSlotFn: SlotFnBuilder = (props, children, loc) =>
+const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
   createFunctionExpression(
     props,
     children,
@@ -149,7 +150,7 @@ export function buildSlots(
     slotsProperties.push(
       createObjectProperty(
         arg || createSimpleExpression('default', true),
-        buildSlotFn(exp, children, loc)
+        buildSlotFn(exp, undefined, children, loc)
       )
     )
   }
@@ -201,11 +202,17 @@ export function buildSlots(
       hasDynamicSlots = true
     }
 
-    const slotFunction = buildSlotFn(slotProps, slotChildren, slotLoc)
+    const vFor = findDir(slotElement, 'for')
+    const slotFunction = buildSlotFn(
+      slotProps,
+      vFor?.exp,
+      slotChildren,
+      slotLoc
+    )
+
     // check if this slot is conditional (v-if/v-for)
     let vIf: DirectiveNode | undefined
     let vElse: DirectiveNode | undefined
-    let vFor: DirectiveNode | undefined
     if ((vIf = findDir(slotElement, 'if'))) {
       hasDynamicSlots = true
       dynamicSlots.push(
@@ -257,7 +264,7 @@ export function buildSlots(
           createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, vElse.loc)
         )
       }
-    } else if ((vFor = findDir(slotElement, 'for'))) {
+    } else if (vFor) {
       hasDynamicSlots = true
       const parseResult =
         vFor.parseResult ||
@@ -306,7 +313,7 @@ export function buildSlots(
       props: ExpressionNode | undefined,
       children: TemplateChildNode[]
     ) => {
-      const fn = buildSlotFn(props, children, loc)
+      const fn = buildSlotFn(props, undefined, children, loc)
       if (__COMPAT__ && context.compatConfig) {
         fn.isNonScopedSlot = true
       }

packages/compiler-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "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.3.6",
-    "@vue/compiler-core": "3.3.6"
+    "@vue/shared": "3.3.7",
+    "@vue/compiler-core": "3.3.7"
   }
 }

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

@@ -1,3 +1,4 @@
+import { normalize } from 'node:path'
 import { Identifier } from '@babel/types'
 import { SFCScriptCompileOptions, parse } from '../../src'
 import { ScriptCompileContext } from '../../src/script/context'
@@ -478,6 +479,33 @@ describe('resolveType', () => {
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
 
+    test.runIf(process.platform === 'win32')('relative ts on Windows', () => {
+      const files = {
+        'C:\\Test\\foo.ts': 'export type P = { foo: number }',
+        'C:\\Test\\bar.d.ts':
+          'type X = { bar: string }; export { X as Y };' +
+          // verify that we can parse syntax that is only valid in d.ts
+          'export const baz: boolean'
+      }
+      const { props, deps } = resolve(
+        `
+      import { P } from './foo'
+      import { Y as PP } from './bar'
+      defineProps<P & PP>()
+    `,
+        files,
+        {},
+        'C:\\Test\\Test.vue'
+      )
+      expect(props).toStrictEqual({
+        foo: ['Number'],
+        bar: ['String']
+      })
+      expect(deps && [...deps].map(normalize)).toStrictEqual(
+        Object.keys(files).map(normalize)
+      )
+    })
+
     // #8244
     test('utility type in external file', () => {
       const files = {
@@ -898,19 +926,20 @@ describe('resolveType', () => {
 function resolve(
   code: string,
   files: Record<string, string> = {},
-  options?: Partial<SFCScriptCompileOptions>
+  options?: Partial<SFCScriptCompileOptions>,
+  sourceFileName: string = '/Test.vue'
 ) {
   const { descriptor } = parse(`<script setup lang="ts">\n${code}\n</script>`, {
-    filename: '/Test.vue'
+    filename: sourceFileName
   })
   const ctx = new ScriptCompileContext(descriptor, {
     id: 'test',
     fs: {
       fileExists(file) {
-        return !!files[file]
+        return !!(files[file] ?? files[normalize(file)])
       },
       readFile(file) {
-        return files[file]
+        return files[file] ?? files[normalize(file)]
       }
     },
     ...options

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

@@ -272,5 +272,73 @@ describe('CSS vars injection', () => {
         `export default {\n  setup(__props, { expose: __expose }) {\n  __expose();\n\n_useCssVars(_ctx => ({\n  "xxxxxxxx-background": (_unref(background))\n}))`
       )
     })
+
+    describe('skip codegen in SSR', () => {
+      test('script setup, inline', () => {
+        const { content } = compileSFCScript(
+          `<script setup>
+          let size = 1
+          </script>\n` +
+            `<style>
+              div {
+                font-size: v-bind(size);
+              }
+            </style>`,
+          {
+            inlineTemplate: true,
+            templateOptions: {
+              ssr: true
+            }
+          }
+        )
+        expect(content).not.toMatch(`_useCssVars`)
+      })
+
+      // #6926
+      test('script, non-inline', () => {
+        const { content } = compileSFCScript(
+          `<script setup>
+          let size = 1
+          </script>\n` +
+            `<style>
+              div {
+                font-size: v-bind(size);
+              }
+            </style>`,
+          {
+            inlineTemplate: false,
+            templateOptions: {
+              ssr: true
+            }
+          }
+        )
+        expect(content).not.toMatch(`_useCssVars`)
+      })
+
+      test('normal script', () => {
+        const { content } = compileSFCScript(
+          `<script>
+          export default {
+            setup() {
+              return {
+                size: ref('100px')
+              }
+            }
+          }
+          </script>\n` +
+            `<style>
+              div {
+                font-size: v-bind(size);
+              }
+            </style>`,
+          {
+            templateOptions: {
+              ssr: true
+            }
+          }
+        )
+        expect(content).not.toMatch(`_useCssVars`)
+      })
+    })
   })
 })