Syntatic sugar ( macro ) for inheritAttrs and name.

[fenilli]

Summary

This proposal is close related to #430, but aims to be constricted to these attributes.
Introduces macros in script setup, specifically to be able to set inheritAttrs and name.

Motivation

Writing components that should pass down props and attrs to the correct tags in the new script setup is verbose, and tedious. So this proposal tries to fix this issue by adding macros to merge or overwrite those attributes.

Example

<script setup lang="ts">
$componentName('My Component');
$inheritAttrs(false);
</script>

Equivalent Output

<script lang="ts">
export default {
  name: 'My Component',
  inheritAttrs: false,
}
</script>

<script setup lang="ts">
</script>

Example with user defined script tag

<script lang="ts">
export default {
  inheritAttrs: true,
}
</script>
  
<script setup lang="ts">
$componentName('My Component');
$inheritAttrs(false);
</script>

Equivalent Output

<script lang="ts">
export default {
  name: 'My Component',
  inheritAttrs: false,
}
</script>

<script setup lang="ts">
</script>

Behaviour

1. The macros should create a <script> tag if there isn't one already defined.
2. If <script> tag is defined by the user it should merge or overwrite their respective values.
3. Macro definition should always be prefered when overwriting is needed.

[sxzz]

IMHO, this proposal seems to be too restricted. defineOptions can be used in this scenario.

[HerringtonDarkholme]

Indeed, to support custom option field defined in user libraries, this RFC will need to provide new compiler macros. e.g. the linked example users will need $layout(wide).

[fenilli]

isn't that the problem with the defineOptions RFC? that is not restrictive enough, because you can't really use defineProps and defineOptions({props}) together, and that supporting custom option fields defined by other libraries aren't supposed to be inside the vue's macro?

[fenilli]

The proposal could be changed to be useMisc instead, where only miscellaneous properties should be passed down.

<script lang="ts">
export default {
  inheritAttrs: true,
}
</script>
  
<script setup lang="ts">
useMisc({
  inheritAttrs: false,
});
</script>