If anyone wants to play with this, I built a working prototype that you can use with Vite. Look here: https://github.com/jods4/vite-auto-ref

It should work in <script setup>, plain old SFC <script> or even any JS/TS file.

If you try it and have some feedback about the idea, here's a good place to post.

If the Vite plugin has bugs, open an issue in the linked repo and I'll see if I can fix it.

@Knacktus

I wonder if we could get rid of the parameter then.

We can't because it's the event names that consumers will bind to: <Comp @saved="..."> so Vue needs to know it.

Unless your suggesting that the defineEmit is only usable in a variable assignment and that the transform reads the name of the target variable -- which I think is going a bit too far. Assignment target is not generally perceived as function input in JS.

@duansheli there is a PR to fix this issue in vue-next https://github.com/vuejs/vue-next/pull/2729

As a workaround, you can change the order of imports, so that defineEmit and defineProps are trailing.

导入顺序不同会报错

<template>
  <h2>666</h2>
</template>

<script setup  lang="ts">
// bad
import { defineProps, defineEmit, useContext } from "vue";

// good
// import { defineProps,  useContext, defineEmit } from "vue";
</script>

@jods4

Great suggestions. I think the separation into single event definitions is the most readable. So, I'd prefer this one.

// Define emits one at a time:
const added = defineEmit<(what: string) => void>("added");
const moved = defineEmit<(what: string, where: number) => void>("moved");

I wonder if we could get rid of the parameter then.

// Define emits one at a time:
const added = defineEmit<(what: string) => void>();
const moved = defineEmit<(what: string, where: number) => void>();

added("abc);
moved("xyz", 4);

@duansheli Do this:

<script setup lang="ts">
import { defineProps } from "vue";
import type { PropType } from "vue";
</script>

How can I import typescript types with the script setup sugar?

This

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { get } from '../plugins/fetch';
import { Movie } from '../types/radarr';
import { RADARR_MOVIES } from '../plugins/fetch/routes/radarr';

const movies = ref([] as Movie[]);

onMounted(async (): Promise<void> => {
    movies.value = await get<Movie[]>(RADARR_MOVIES);
});
</script>

gives me an "Uncaught SyntaxError: import not found: Movie".

I've tried moving the type import to the non setup script tag, but it has the same effect. Any tips for this?

When we pass ref to a component or DOM element, the ref will point to component instance or DOM element which handled by Vue internally.

In some case we may want to handle ref ourself. For example, if I want wrapper a Input component but just want to handle some logic when use input. I maight do:

const Input = defineComponent({
  setup() {

    const localHandleInput = () => {}
    return () => <input onInput={localHandleInput} />
  }
})

At this case I don't want the ref passed to the component just point to the component instance because it's nothing there. I want to point the ref to the real input DOM element, by now I did not find any way to implement this.

Maybe we need to add some api like forwardRef in React, or add an forwardRef option when defineComponent. Then Vue pass the ref handler into the setup method, so that we can handle ref ourself.

const Input = defineComponent({
  forwardFef: true,
  setup(props, { ref }) {

    const localHandleInput = () => {}
    return () => <input onInput={localHandleInput} ref={ref} />
  }
})

Summary

Maintain a store by history state key. Can be used to save something.

Links

<!-- Link to a GitHub-rendered version of your RFC, e.g. https://github.com/<USERNAME>/rfcs/blob/<BRANCH>/active-rfcs/0000-my-proposal.md You can find this link by navigating to this file on your branch. -->

• Full Rendered Proposal <!-- Please open and link to a corresponding discussion thread (under "Discussion" tab of the repo). After submitting the PR, make sure to edit the discussion to link to this PR. -->

• Related issue

<!-- include additional links to related issues if applicable -->

Thank you but as I already said, this is not something the router needs, even less expose it as a public api

两句报错信息：

Uncaught (in promise) TypeError: Cannot destructure property 'default' of 'undefined' as it is undefined.

does not provide an export named 'PropType'

组件代码

<template>
  <h2>666</h2>
</template>

<script setup  lang="ts">
import { defineProps, PropType } from "vue";

// defineProps({
//   abc: { type: Array as PropType<Person[]> },
// });
</script>

<style scoped>
</style>

触发条件

导出了 PropType

Summary

<!-- Short summary on what problem this RFC solves, and concise example usage of the feature -->

Links

<!-- Link to a GitHub-rendered version of your RFC, e.g. https://github.com/<USERNAME>/rfcs/blob/<BRANCH>/active-rfcs/0000-my-proposal.md You can find this link by navigating to this file on your branch. -->

• Full Rendered Proposal

<!-- Please open and link to a corresponding discussion thread (under "Discussion" tab of the repo). After submitting the PR, make sure to edit the discussion to link to this PR. -->

• Discussion Thread

<!-- include additional links to related issues if applicable -->

Important: Do NOT comment on this PR. Please use the discussion thread linked above to provide feedback, as it provides branched discussions that are easier to follow. This also makes the edit history of the PR clearer.

Summary

<!-- Short summary on what problem this RFC solves, and concise example usage of the feature -->

Links

<!-- Link to a GitHub-rendered version of your RFC, e.g. https://github.com/<USERNAME>/rfcs/blob/<BRANCH>/active-rfcs/0000-my-proposal.md You can find this link by navigating to this file on your branch. -->

• Full Rendered Proposal

<!-- Please open and link to a corresponding discussion thread (under "Discussion" tab of the repo). After submitting the PR, make sure to edit the discussion to link to this PR. -->

• Discussion Thread

<!-- include additional links to related issues if applicable -->

Important: Do NOT comment on this PR. Please use the discussion thread linked above to provide feedback, as it provides branched discussions that are easier to follow. This also makes the edit history of the PR clearer.