Merge branch 'main' of github.com:vuejs/core-vapor into ubugeeei/feat/component-slot

Author: ubugeeei

.github/workflows/ci.yml

@@ -20,7 +20,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -42,7 +42,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -102,7 +102,7 @@ jobs:
   #     - uses: actions/checkout@v4
 
   #     - name: Install pnpm
-  #       uses: pnpm/action-setup@v2
+  #       uses: pnpm/action-setup@v3.0.0
 
   #     - name: Install Node.js
   #       uses: actions/setup-node@v4

.github/workflows/size-data.yml

@@ -7,6 +7,7 @@ on:
   pull_request:
     branches:
       - main
+      - minor
 
 permissions:
   contents: read
@@ -22,7 +23,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4

.github/workflows/size-report.yml

@@ -24,7 +24,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4

package.json

@@ -59,8 +59,8 @@
     "node": ">=18.12.0"
   },
   "devDependencies": {
-    "@babel/parser": "^7.23.9",
-    "@babel/types": "^7.23.9",
+    "@babel/parser": "^7.24.0",
+    "@babel/types": "^7.24.0",
     "@codspeed/vitest-plugin": "^2.3.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -70,10 +70,10 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@types/hash-sum": "^1.0.2",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^20.11.20",
+    "@types/node": "^20.11.25",
     "@types/semver": "^7.5.8",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "@vitest/coverage-istanbul": "^1.3.1",
     "@vitest/ui": "^1.2.2",
     "@vue/consolidate": "1.0.0",
@@ -90,30 +90,30 @@
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
     "lodash": "^4.17.21",
-    "magic-string": "^0.30.7",
+    "magic-string": "^0.30.8",
     "markdown-table": "^3.0.3",
-    "marked": "^12.0.0",
+    "marked": "^12.0.1",
     "minimist": "^1.2.8",
     "npm-run-all2": "^6.1.2",
     "picocolors": "^1.0.0",
     "prettier": "^3.2.5",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.2",
-    "puppeteer": "~22.2.0",
+    "puppeteer": "~22.4.1",
     "rimraf": "^5.0.5",
-    "rollup": "^4.12.0",
+    "rollup": "^4.12.1",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "semver": "^7.6.0",
     "serve": "^14.2.1",
-    "simple-git-hooks": "^2.9.0",
-    "terser": "^5.28.1",
+    "simple-git-hooks": "^2.10.0",
+    "terser": "^5.29.1",
     "todomvc-app-css": "^2.4.3",
     "tslib": "^2.6.2",
     "tsx": "^4.7.1",
     "typescript": "^5.2.2",
-    "vite": "^5.1.4",
+    "vite": "^5.1.5",
     "vitest": "^1.3.1"
   }
 }

packages/compiler-core/package.json

@@ -46,13 +46,13 @@
   },
   "homepage": "https://github.com/vuejs/core-vapor/tree/main/packages/compiler-core#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.9",
+    "@babel/parser": "^7.24.0",
     "@vue/shared": "workspace:*",
     "entities": "^4.5.0",
     "estree-walker": "^2.0.2",
     "source-map-js": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.9"
+    "@babel/types": "^7.24.0"
   }
 }

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

@@ -1362,3 +1362,24 @@ return { get foo() { return foo } }
 
 }"
 `;
+
+exports[`compileScript > should care about runtimeModuleName 1`] = `
+"import { withAsyncContext as _withAsyncContext } from "npm:vue"
+
+export default {
+  async setup(__props, { expose: __expose }) {
+  __expose();
+
+let __temp, __restore
+
+        ;(
+  ([__temp,__restore] = _withAsyncContext(() => Promise.resolve(1))),
+  await __temp,
+  __restore()
+)
+      
+return {  }
+}
+
+}"
+`;

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

@@ -1472,3 +1472,26 @@ describe('SFC genDefaultAs', () => {
     })
   })
 })
+
+describe('compileScript', () => {
+  test('should care about runtimeModuleName', () => {
+    const { content } = compile(
+      `
+      <script setup>
+        await Promise.resolve(1)
+      </script>
+      `,
+      {
+        templateOptions: {
+          compilerOptions: {
+            runtimeModuleName: 'npm:vue',
+          },
+        },
+      },
+    )
+    expect(content).toMatch(
+      `import { withAsyncContext as _withAsyncContext } from "npm:vue"\n`,
+    )
+    assertCode(content)
+  })
+})

packages/compiler-sfc/package.json

@@ -42,19 +42,19 @@
   },
   "homepage": "https://github.com/vuejs/core-vapor/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.9",
+    "@babel/parser": "^7.24.0",
     "@vue/compiler-core": "workspace:*",
     "@vue/compiler-dom": "workspace:*",
     "@vue/compiler-ssr": "workspace:*",
     "@vue/compiler-vapor": "workspace:*",
     "@vue/shared": "workspace:*",
     "estree-walker": "^2.0.2",
-    "magic-string": "^0.30.7",
+    "magic-string": "^0.30.8",
     "postcss": "^8.4.35",
     "source-map-js": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.9",
+    "@babel/types": "^7.24.0",
     "@vue/consolidate": "^1.0.0",
     "hash-sum": "^2.0.0",
     "lru-cache": "10.1.0",

packages/compiler-sfc/src/compileScript.ts

@@ -999,10 +999,15 @@ export function compileScript(
 
   // 11. finalize Vue helper imports
   if (ctx.helperImports.size > 0) {
+    const runtimeModuleName =
+      options.templateOptions?.compilerOptions?.runtimeModuleName
+    const importSrc = runtimeModuleName
+      ? JSON.stringify(runtimeModuleName)
+      : `'vue'`
     ctx.s.prepend(
       `import { ${[...ctx.helperImports]
         .map(h => `${h} as _${h}`)
-        .join(', ')} } from 'vue'\n`,
+        .join(', ')} } from ${importSrc}\n`,
     )
   }
   if (ctx.vaporHelperImports.size > 0) {

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -120,18 +120,19 @@ export function render(_ctx) {
 `;
 
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
-"import { createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent, createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
 const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
-const t1 = _template("<div><Comp></Comp></div>")
+const t1 = _template("<div></div>")
 
 export function render(_ctx) {
   const n0 = t0()
-  const n2 = t1()
-  const n1 = _createTextNode()
-  _insert(n1, n2)
-  _renderEffect(() => _setText(n1, _ctx.bar))
-  _renderEffect(() => _setDynamicProp(n2, "id", _ctx.foo))
-  return [n0, n2]
+  const n3 = t1()
+  const n1 = _createComponent(_resolveComponent("Comp"))
+  const n2 = _createTextNode()
+  _insert([n1, n2], n3)
+  _renderEffect(() => _setText(n2, _ctx.bar))
+  _renderEffect(() => _setDynamicProp(n3, "id", _ctx.foo))
+  return [n0, n3]
 }"
 `;
 

packages/compiler-vapor/__tests__/compile.spec.ts

@@ -72,7 +72,6 @@ describe('compile', () => {
         expect(code).not.contains('effect')
       })
 
-      // TODO: support multiple root nodes and components
       test('should not affect siblings after it', () => {
         const code = compile(
           `<div v-pre :id="foo"><Comp/>{{ bar }}</div>\n` +

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -75,3 +75,14 @@ export function render(_ctx) {
   return n0
 }"
 `;
+
+exports[`compiler: element transform > v-on="obj" 1`] = `
+"import { renderEffect as _renderEffect, setDynamicEvents as _setDynamicEvents, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _renderEffect(() => _setDynamicEvents(n0, _ctx.obj))
+  return n0
+}"
+`;

packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap

@@ -84,6 +84,39 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: vModel transform > should support member expression 1`] = `
+"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor';
+const t0 = _template("<input>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  const n1 = t0()
+  const n2 = t0()
+  _withDirectives(n0, [[_vModelText, () => _ctx.setupRef.child]])
+  _withDirectives(n1, [[_vModelText, () => _ctx.setupLet.child]])
+  _withDirectives(n2, [[_vModelText, () => _ctx.setupMaybeRef.child]])
+  _delegate(n0, "update:modelValue", () => $event => (_ctx.setupRef.child = $event))
+  _delegate(n1, "update:modelValue", () => $event => (_ctx.setupLet.child = $event))
+  _delegate(n2, "update:modelValue", () => $event => (_ctx.setupMaybeRef.child = $event))
+  return [n0, n1, n2]
+}"
+`;
+
+exports[`compiler: vModel transform > should support member expression w/ inline 1`] = `
+"(() => {
+  const n0 = t0()
+  const n1 = t0()
+  const n2 = t0()
+  _withDirectives(n0, [[_vModelText, () => setupRef.value.child]])
+  _withDirectives(n1, [[_vModelText, () => _unref(setupLet).child]])
+  _withDirectives(n2, [[_vModelText, () => _unref(setupMaybeRef).child]])
+  _delegate(n0, "update:modelValue", () => $event => (setupRef.value.child = $event))
+  _delegate(n1, "update:modelValue", () => $event => (_unref(setupLet).child = $event))
+  _delegate(n2, "update:modelValue", () => $event => (_unref(setupMaybeRef).child = $event))
+  return [n0, n1, n2]
+})()"
+`;
+
 exports[`compiler: vModel transform > should support select 1`] = `
 "import { vModelSelect as _vModelSelect, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor';
 const t0 = _template("<select></select>")

packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts

@@ -344,4 +344,32 @@ describe('compiler: element transform', () => {
       },
     ])
   })
+
+  test('v-on="obj"', () => {
+    const { code, ir } = compileWithElementTransform(`<div v-on="obj" />`)
+    expect(code).toMatchSnapshot()
+    expect(ir.block.effect).toMatchObject([
+      {
+        expressions: [
+          {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'obj',
+            isStatic: false,
+          },
+        ],
+        operations: [
+          {
+            type: IRNodeTypes.SET_DYNAMIC_EVENTS,
+            element: 0,
+            event: {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: 'obj',
+              isStatic: false,
+            },
+          },
+        ],
+      },
+    ])
+    expect(code).contains('_setDynamicEvents(n0, _ctx.obj)')
+  })
 })

packages/compiler-vapor/__tests__/transforms/vModel.spec.ts

@@ -1,6 +1,6 @@
 import { makeCompile } from './_utils'
 import { transformChildren, transformElement, transformVModel } from '../../src'
-import { DOMErrorCodes } from '@vue/compiler-dom'
+import { BindingTypes, DOMErrorCodes } from '@vue/compiler-dom'
 
 const compileWithVModel = makeCompile({
   nodeTransforms: [transformElement, transformChildren],
@@ -171,4 +171,35 @@ describe('compiler: vModel transform', () => {
       expect(code).toMatchSnapshot()
     })
   })
+
+  test('should support member expression', () => {
+    const { code } = compileWithVModel(
+      '<input v-model="setupRef.child" /><input v-model="setupLet.child" /><input v-model="setupMaybeRef.child" />',
+      {
+        bindingMetadata: {
+          setupRef: BindingTypes.SETUP_REF,
+          setupLet: BindingTypes.SETUP_LET,
+          setupMaybeRef: BindingTypes.SETUP_MAYBE_REF,
+        },
+      },
+    )
+
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should support member expression w/ inline', () => {
+    const { code } = compileWithVModel(
+      '<input v-model="setupRef.child" /><input v-model="setupLet.child" /><input v-model="setupMaybeRef.child" />',
+      {
+        bindingMetadata: {
+          setupRef: BindingTypes.SETUP_REF,
+          setupLet: BindingTypes.SETUP_LET,
+          setupMaybeRef: BindingTypes.SETUP_MAYBE_REF,
+        },
+        inline: true,
+      },
+    )
+
+    expect(code).toMatchSnapshot()
+  })
 })