Merge branch 'main' into chore-perf

package.json

@@ -87,7 +87,7 @@
  "prettier": "^2.7.1",
  "pug": "^3.0.1",
  "puppeteer": "~19.6.0",
- "rollup": "^3.20.2",
+ "rollup": "^3.26.0",
  "rollup-plugin-dts": "^5.3.0",
  "rollup-plugin-esbuild": "^5.0.0",
  "rollup-plugin-polyfill-node": "^0.12.0",
@@ -97,7 +97,7 @@
  "terser": "^5.15.1",
  "todomvc-app-css": "^2.3.0",
  "tslib": "^2.5.0",
- "typescript": "^5.0.0",
+ "typescript": "^5.1.6",
  "vite": "^4.3.0",
  "vitest": "^0.30.1"
  }

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

@@ -62,6 +62,24 @@ return { fn }
 })"
 `;
 
+exports[`SFC compile <script setup> > <script> and <script setup> co-usage > keep original semi style 1`] = `
+"export default {
+ props: ['item'],
+ emits: ['change'],
+ setup(__props, { expose: __expose, emit: __emit }) {
+ __expose();
+
+ console.log('test')
+ const props = __props;
+ const emit = __emit;
+ (function () {})()
+ 
+return { props, emit }
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > <script> and <script setup> co-usage > script first 1`] = `
 "import { x } from './x'
  
@@ -612,75 +630,6 @@ return { foo, bar, baz, y, z }
 }"
 `;
 
-exports[`SFC compile <script setup> > defineProps/defineEmits in multi-variable declaration (full removal) 1`] = `
-"export default {
- props: ['item'],
- emits: ['a'],
- setup(__props, { expose: __expose, emit }) {
- __expose();
-
-const props = __props;
-
- 
- 
-return { props, emit }
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> > defineProps/defineEmits in multi-variable declaration 1`] = `
-"export default {
- props: ['item'],
- emits: ['a'],
- setup(__props, { expose: __expose, emit }) {
- __expose();
-
-const props = __props;
-
- const a = 1;
- 
-return { props, a, emit }
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> > defineProps/defineEmits in multi-variable declaration fix #6757 1`] = `
-"export default {
- props: ['item'],
- emits: ['a'],
- setup(__props, { expose: __expose, emit }) {
- __expose();
-
-const props = __props;
-
- const a = 1;
- 
-return { a, props, emit }
-}
-
-}"
-`;
-
-exports[`SFC compile <script setup> > defineProps/defineEmits in multi-variable declaration fix #7422 1`] = `
-"export default {
- props: ['item'],
- emits: ['foo'],
- setup(__props, { expose: __expose, emit: emits }) {
- __expose();
-
-const props = __props;
-
- const a = 0,
- b = 0;
- 
-return { props, emits, a, b }
-}
-
-}"
-`;
-
 exports[`SFC compile <script setup> > dev mode import usage check > TS annotations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { Foo, Bar, Baz, Qux, Fred } from './x'
@@ -745,6 +694,21 @@ return { get vMyDir() { return vMyDir } }
 })"
 `;
 
+exports[`SFC compile <script setup> > dev mode import usage check > dynamic arguments 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBar, foo, bar, unused } from './x'
+ 
+export default /*#__PURE__*/_defineComponent({
+ setup(__props, { expose: __expose }) {
+ __expose();
+
+ 
+return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar } }
+}
+
+})"
+`;
+
 exports[`SFC compile <script setup> > dev mode import usage check > js template string interpolations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { VAR, VAR2, VAR3 } from './x'
@@ -775,6 +739,21 @@ return { get FooBaz() { return FooBaz }, get Last() { return Last } }
 })"
 `;
 
+exports[`SFC compile <script setup> > dev mode import usage check > template ref 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { foo, bar, Baz } from './foo'
+ 
+export default /*#__PURE__*/_defineComponent({
+ setup(__props, { expose: __expose }) {
+ __expose();
+
+ 
+return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }
+}
+
+})"
+`;
+
 exports[`SFC compile <script setup> > dev mode import usage check > vue interpolations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { x, y, z, x$y } from './x'

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

@@ -68,64 +68,6 @@ describe('SFC compile <script setup>', () => {
  assertCode(content)
  })
 
- test('defineProps/defineEmits in multi-variable declaration', () => {
- const { content } = compile(`
- <script setup>
- const props = defineProps(['item']),
- a = 1,
- emit = defineEmits(['a']);
- </script>
- `)
- assertCode(content)
- expect(content).toMatch(`const a = 1;`) // test correct removal
- expect(content).toMatch(`props: ['item'],`)
- expect(content).toMatch(`emits: ['a'],`)
- })
-
- // #6757
- test('defineProps/defineEmits in multi-variable declaration fix #6757 ', () => {
- const { content } = compile(`
- <script setup>
- const a = 1,
- props = defineProps(['item']),
- emit = defineEmits(['a']);
- </script>
- `)
- assertCode(content)
- expect(content).toMatch(`const a = 1;`) // test correct removal
- expect(content).toMatch(`props: ['item'],`)
- expect(content).toMatch(`emits: ['a'],`)
- })
-
- // #7422
- test('defineProps/defineEmits in multi-variable declaration fix #7422', () => {
- const { content } = compile(`
- <script setup>
- const props = defineProps(['item']),
- emits = defineEmits(['foo']),
- a = 0,
- b = 0;
- </script>
- `)
- assertCode(content)
- expect(content).toMatch(`props: ['item'],`)
- expect(content).toMatch(`emits: ['foo'],`)
- expect(content).toMatch(`const a = 0,`)
- expect(content).toMatch(`b = 0;`)
- })
-
- test('defineProps/defineEmits in multi-variable declaration (full removal)', () => {
- const { content } = compile(`
- <script setup>
- const props = defineProps(['item']),
- emit = defineEmits(['a']);
- </script>
- `)
- assertCode(content)
- expect(content).toMatch(`props: ['item'],`)
- expect(content).toMatch(`emits: ['a'],`)
- })
-
  describe('<script> and <script setup> co-usage', () => {
  test('script first', () => {
  const { content } = compile(`
@@ -156,6 +98,24 @@ describe('SFC compile <script setup>', () => {
  assertCode(content)
  })
 
+ // #7805
+ test('keep original semi style', () => {
+ const { content } = compile(`
+ <script setup>
+ console.log('test')
+ const props = defineProps(['item']);
+ const emit = defineEmits(['change']);
+ (function () {})()
+ </script>
+ `)
+ assertCode(content)
+
+ expect(content).toMatch(`console.log('test')`)
+ expect(content).toMatch(`const props = __props;`)
+ expect(content).toMatch(`const emit = __emit;`)
+ expect(content).toMatch(`(function () {})()`)
+ })
+
  test('script setup first, named default export', () => {
  const { content } = compile(`
  <script setup>
@@ -413,6 +373,25 @@ describe('SFC compile <script setup>', () => {
  assertCode(content)
  })
 
+ test('dynamic arguments', () => {
+ const { content } = compile(`
+ <script setup lang="ts">
+ import { FooBar, foo, bar, unused } from './x'
+ </script>
+ <template>
+ <FooBar #[foo.slotName] />
+ <FooBar #unused />
+ <div :[bar.attrName]="15"></div>
+ <div unused="unused"></div>
+ </template>
+ `)
+ expect(content).toMatch(
+ `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
+ `get bar() { return bar } }`
+ )
+ assertCode(content)
+ })
+
  // https://github.com/vuejs/core/issues/4599
  test('attribute expressions', () => {
  const { content } = compile(`
@@ -513,6 +492,23 @@ describe('SFC compile <script setup>', () => {
  </template>
  `)
  })
+
+ test('template ref', () => {
+ const { content } = compile(`
+ <script setup lang="ts">
+ import { foo, bar, Baz } from './foo'
+ </script>
+ <template>
+ <div ref="foo"></div>
+ <div ref=""></div>
+ <Baz ref="bar" />
+ </template>
+ `)
+ expect(content).toMatch(
+ 'return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }'
+ )
+ assertCode(content)
+ })
  })
 
  describe('inlineTemplate mode', () => {