use root <template script="ts">

[stafyniaksacha]

What do you think having a new script attribute allowed in the root <template> tag of SFC components ? (and not lang which is already used)
This would allow using typescript in anonymous functions in our templates:

<template script="ts">
  <img src="/not-found.webp" @error.once="(event: Event) => {
    const target = event.target as HTMLImageElement
    target.src = '/placeholder.webp'
   }" />
</template>

Taking the idea to the end, it may allow other parser like dart (maybe to port vue to native mobile components with flutter?)

[yyx990803]

Currently you can already use TS in template expressions by specifying compilerOptions: { expressionPlugins: ['typescript'] } via @vitejs/plugin-vue or vue-loader options.

[stafyniaksacha]

Regardless of that, what do you think about having dart support to target mobile ? (I mean, paradigms are not quite far, and the vue sfc compiler can be replaced with a specific dart/flutter one)

[yyx990803]

Actually, I just published @vitejs/plugin-vue 1.7.0 which now automatically enables TS syntax in template expressions when <script lang="ts"> is used.

Re Dart support - that's going to be a long shot because the current compiler only targets JS (it supports TS because TS is a strict superset).

[yyx990803]

Do note I found some edge cases when enabling TS syntax template expressions which needs to be fixed in Vue core, but that shouldn't take long.

[stafyniaksacha]

Actually, I just published @vitejs/plugin-vue 1.7.0 which now automatically enables TS syntax in template expressions when <script lang="ts"> is used.

\0/ The Dx with Volar in take over mode is now amazing!

edit: I think this was the fastest resolved feature request 😂

Re Dart support - that's going to be a long shot because the current compiler only targets JS (it supports TS because TS is a strict superset).

I just watched the replay of your talk at the nuxt notion yesterday, and what I understood is that Vue Native is the only one who has attempted to build mobile application with React Native bridge. But, if I understood how sfc it's done, what we need it's to replace https://github.com/vuejs/vue/tree/dev/src/platforms/web/compiler with a compiler that output dart/flutter code and then compile our flutter code to apps instead having the https://github.com/vuejs/vue/tree/dev/src/platforms/web/runtime

edit (dart): should we start another discussion about ?
edit 2: composition api should be written in native dart

[yyx990803]

That would be essentially rewriting the framework in Dart, which is not really something we are interested in. However the idea of running a Vue application using Flutter's underlying rendering engine is possible - Alibaba is working on a project that combines a browser-like JS runtime with Flutter's rendering layer. The benefit would be Flutter-like rendering performance with Vue running as-is in its JS runtime. I haven't tried it myself but I think the direction is promising.

[Trinovantes]

While vite now allows TS in template expressions, webpack with vue-loader@16.5.0 currently cannot use TS in template expressions

With this webpack config:

            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                        appendTsSuffixTo: [/\.vue$/],
                    },
                }],
            },
                test: /\.vue$/,
                use: [{
                    loader: 'vue-loader',
                    options: {
                        exposeFilename: true,
                        compilerOptions: {
                            expressionPlugins: ['typescript'],
                        },
                    },
                }],
            },

It seems expressionPlugins is only used to parse the AST rather than both parsing and codegen:

https://github.com/vuejs/vue-next/blob/5594643d7b49b77e60f6d4682a3a71db0b1c6552/packages/compiler-core/src/transforms/transformExpression.ts#L241-L243

As a result, the generated code is still includes Typescript annotations:

ERROR in ./src/web/client/components/App.vue?vue&type=template&id=1abc23c8 (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/web/client/components/App.vue?vue&type=template&id=1abc23c8) 4:36
Module parse failed: Unexpected token (4:36)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/templateLoader.js
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| 
| export function render(_ctx, _cache, $props, $setup, $data, $options) {
>   return _toDisplayString((_ctx.val as string).toUpperCase())
| }
 @ ./src/web/client/components/App.vue?vue&type=template&id=1abc23c8 1:0-206 1:0-206
 @ ./src/web/client/components/App.vue 1:0-64 4:16-22 14:63-16:3 15:29-35 14:2-16:4
 @ ./node_modules/ts-loader/index.js??clonedRuleSet-1.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/web/client/components/AppLoader.vue?vue&type=script&lang=ts 2:0-28 5:8-11
 @ ./src/web/client/components/AppLoader.vue?vue&type=script&lang=ts 1:0-205 1:0-205 1:206-400 1:206-400
 @ ./src/web/client/components/AppLoader.vue 2:0-60 3:0-55 3:0-55 6:0-13 9:2-16 12:36-42 13:27-33 22:0-13 24:15-21
 @ ./src/web/app.ts 2:0-58 14:29-38
 @ ./src/web/entryClient.ts 5:0-34 16:26-35

I'm not sure if I should report this issue with vue-next (does compiler-sfc need a postProcessPlugins option?) or with vue-loader to chain a Typescript loader to the generated template render function

[yyx990803]

Yep, vue-loader doesn't support this yet. Will likely do soon.

[cexbrayat]

vue-loader now supports it in v16.8+, and @vue/vue3-jest has a PR to enable it automatically as well