Takeover mode + inline templates in .ts files

[sethidden]

Now that thanks to vue-tsc it's possible to access .ts files, I'm wondering if non-SFC components could benefit from Volar also?

For example:

// MyFile.ts
import MyButton from './MyButton.vue'
import { defineComponent } from 'vue'
export const MyComponent = defineComponent({ // <-- Let's assume that users will HAVE to use defineComponent so Volar knows this is a Vue component and not some random object
  components: { MyButton },
  template: '<MyButton [cursor is here, then I press CTRL+Space to get prop completions] >' // <-- Is it possible to extract prop information from MyButton and display completions for props even though this is just a string? 
})

This would somewhat alleviate the problem shown here: storybookjs/storybook#9768 (comment). I originally made that comment because of how the Storybook expects Vue users to define their Stories: https://storybook.js.org/blog/storybook-vue3/#auto-generated-controls-and-documentation

If Volar could provide LSP features for inline templates, Storybook's approach to Vue stories would be slightly more manageable (still impossible to use eslint-plugin-vue on inline strings) - vue-tsc could help prevent users from eg. using props that don't exist or passing the wrong type to an existing prop

Storybook's case is a special case of usage for inline templates, but other users that use inline templates could also benefit from it.

Problems with this feature request:

1. Inline templates are rarely used
2. Implementation of this feature will be difficult - treating a TS string as a real template is really weird
3. Storybook could change their approach in the future to support .vue files, which will mean this feature (if implemented) wouldn't save the day anymore :P

[sethidden]

I guess the same story applies for JSX

// MyComponent.ts
import MyButton from './MyButton.vue'
export const MyComponent = defineComponent({
  components: {
    MyButton,
  },
  setup() {
    return <MyButton [cursor is here, press CTRL+SPACE to get completions] />
  }
})

and I was tempted to mention JSX in my OP, but since inline templates are the crazier case let's focus on them in this particular issue

[johnsoncodehk]

This is not difficult to implement, the problem is how to implement it reasonably.
In addition to string template, there is also vitepress. The problem can be classified as how to customize the template language support range. I plan to support it in the plugin API (#185).

(Close for now because this is downstream of plugin API)