Skip to content

Commit 573fbd2

Browse files
yyx990803yyx990803
committed
feat: support ts in template expressions
1 parent bf42de0 commit 573fbd2

File tree

13 files changed

+229
-166
lines changed

13 files changed

+229
-166
lines changed

‎example/App.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@
55
<span>{{ count }}</span>
66
<Button foo="hello!"><span>slot</span></Button>
77
<ScriptSetup/>
8+
<TypeScript/>
89
</div>
910
</template>
1011

1112
<script>
1213
import Button from './Button.vue'
1314
import ScriptSetup from './ScriptSetup.vue'
15+
import TypeScript from './TypeScript.vue'
1416
1517
export default {
1618
data() {
@@ -21,7 +23,8 @@ export default {
2123
},
2224
components: {
2325
Button,
24-
ScriptSetup
26+
ScriptSetup,
27+
TypeScript
2528
}
2629
}
2730
</script>

‎example/ScriptSetup.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
1-
<template>
2-
<h2>{{ hello }}</h2>
3-
<div>
4-
{{ count }} <button @click="inc">+</button>
5-
<button @click="changeColor">change color</button>
6-
<Button />
7-
</div>
8-
</template>
9-
101
<script setup>
112
import { ref } from 'vue'
123
import Button from './Button.vue'
134
14-
ref: count = 100
5+
let count = $ref(100)
156
167
function inc() {
178
count++
@@ -25,6 +16,15 @@ const changeColor = () => {
2516
}
2617
</script>
2718

19+
<template>
20+
<h2>{{ hello }}</h2>
21+
<div>
22+
ref sugar count: {{ count }} <button @click="inc">+</button>
23+
<button @click="changeColor">change color</button>
24+
<Button />
25+
</div>
26+
</template>
27+
2828
<style>
2929
h2 {
3030
color: v-bind(color);

‎example/TypeScript.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script setup lang="ts">
2+
let a: number = 12
3+
</script>
4+
5+
<template>
6+
<p>From TS: {{ a?.toFixed(2) }}</p>
7+
</template>

‎example/tsconfig.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"sourceMap": true
5+
}
6+
}

‎example/webpack.config.js‎

Lines changed: 37 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -80,38 +80,49 @@ module.exports = (env = {}) => {
8080
'css-loader',
8181
],
8282
},
83+
// {
84+
// test: /\.js$/,
85+
// use: [
86+
// {
87+
// loader: 'cache-loader',
88+
// options: {
89+
// cacheIdentifier: hash(
90+
// // deps
91+
// fs.readFileSync(
92+
// path.resolve(__dirname, '../package.json')
93+
// ) +
94+
// // env
95+
// JSON.stringify(env) +
96+
// // client vs. server build
97+
// isServerBuild
98+
// ),
99+
// cacheDirectory: path.resolve(__dirname, '../.cache'),
100+
// },
101+
// },
102+
// ...(useBabel
103+
// ? [
104+
// {
105+
// loader: 'babel-loader',
106+
// options: {
107+
// // use yarn build-example --env.noMinimize to verify that
108+
// // babel is properly applied to all js code, including the
109+
// // render function compiled from SFC templates.
110+
// presets: ['@babel/preset-env'],
111+
// },
112+
// },
113+
// ]
114+
// : []),
115+
// ],
116+
// },
83117
{
84-
test: /\.js$/,
118+
test: /\.ts$/,
85119
use: [
86120
{
87-
loader: 'cache-loader',
121+
loader: 'ts-loader',
88122
options: {
89-
cacheIdentifier: hash(
90-
// deps
91-
fs.readFileSync(
92-
path.resolve(__dirname, '../package.json')
93-
) +
94-
// env
95-
JSON.stringify(env) +
96-
// client vs. server build
97-
isServerBuild
98-
),
99-
cacheDirectory: path.resolve(__dirname, '../.cache'),
123+
appendTsSuffixTo: [/\.vue$/],
100124
},
101125
},
102-
...(useBabel
103-
? [
104-
{
105-
loader: 'babel-loader',
106-
options: {
107-
// use yarn build-example --env.noMinimize to verify that
108-
// babel is properly applied to all js code, including the
109-
// render function compiled from SFC templates.
110-
presets: ['@babel/preset-env'],
111-
},
112-
},
113-
]
114-
: []),
115126
],
116127
},
117128
// target <docs> custom blocks

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"loader-utils": "^2.0.0"
3838
},
3939
"peerDependencies": {
40-
"@vue/compiler-sfc": "^3.0.8",
40+
"@vue/compiler-sfc": "^3.2.12",
4141
"webpack": "^4.1.0 || ^5.0.0-0"
4242
},
4343
"peerDependenciesMeta": {
@@ -51,12 +51,12 @@
5151
"@types/estree": "^0.0.45",
5252
"@types/hash-sum": "^1.0.0",
5353
"@types/jest": "^26.0.13",
54-
"@types/jsdom": "^16.2.4",
54+
"@types/jsdom": "^16.2.13",
5555
"@types/loader-utils": "^2.0.1",
5656
"@types/mini-css-extract-plugin": "^0.9.1",
5757
"@types/webpack": "^4.41.0",
5858
"@types/webpack-merge": "^4.1.5",
59-
"@vue/compiler-sfc": "^3.0.8",
59+
"@vue/compiler-sfc": "^3.2.12",
6060
"babel-loader": "^8.1.0",
6161
"cache-loader": "^4.1.0",
6262
"conventional-changelog-cli": "^2.1.1",
@@ -84,9 +84,9 @@
8484
"ts-jest": "^26.2.0",
8585
"ts-loader": "^8.0.6",
8686
"ts-loader-v9": "npm:ts-loader@^9.2.4",
87-
"typescript": "^4.0.2",
87+
"typescript": "^4.4.3",
8888
"url-loader": "^4.1.0",
89-
"vue": "^3.0.8",
89+
"vue": "^3.2.12",
9090
"webpack": "^4.41.2",
9191
"webpack-cli": "^3.3.10",
9292
"webpack-dev-server": "^3.9.0",

‎src/index.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,12 @@ export default function loader(
5757
) {
5858
const loaderContext = this
5959

60+
if (!/\.vue(\.html)?$/.test(loaderContext.resourcePath)) {
61+
// ts-loader does some really weird stuff which causes vue-loader to
62+
// somehow be applied on non-vue files... ignore them
63+
return source
64+
}
65+
6066
// check if plugin is installed
6167
if (
6268
!errorEmitted &&
@@ -150,8 +156,11 @@ export default function loader(
150156

151157
// script
152158
let scriptImport = `const script = {}`
159+
let isTS = false
153160
const { script, scriptSetup } = descriptor
154161
if (script || scriptSetup) {
162+
const lang = script?.lang || scriptSetup?.lang
163+
isTS = !!(lang && /tsx?/.test(lang))
155164
const src = (script && !scriptSetup && script.src) || resourcePath
156165
const attrsQuery = attrsToQuery((scriptSetup || script)!.attrs, 'js')
157166
const query = `?vue&type=script${attrsQuery}${resourceQuery}`
@@ -172,13 +181,8 @@ export default function loader(
172181
const idQuery = `&id=${id}`
173182
const scopedQuery = hasScoped ? `&scoped=true` : ``
174183
const attrsQuery = attrsToQuery(descriptor.template.attrs)
175-
// const bindingsQuery = script
176-
// ? `&bindings=${JSON.stringify(script.bindings ?? {})}`
177-
// : ``
178-
// const varsQuery = descriptor.cssVars
179-
// ? `&vars=${qs.escape(generateCssVars(descriptor, id, isProduction))}`
180-
// : ``
181-
const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${resourceQuery}`
184+
const tsQuery = isTS ? `&ts=true` : ``
185+
const query = `?vue&type=template${idQuery}${scopedQuery}${tsQuery}${attrsQuery}${resourceQuery}`
182186
templateRequest = stringifyRequest(src + query)
183187
templateImport = `import { ${renderFnName} } from ${templateRequest}`
184188
}

‎src/pluginWebpack4.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,14 @@ class VueLoaderPlugin implements webpack.Plugin {
7575
options: vueLoaderOptions,
7676
}
7777

78-
// for each rule that matches plain .js files, also create a clone and
78+
// for each rule that matches plain .js/.ts files, also create a clone and
7979
// match it against the compiled template code inside *.vue files, so that
8080
// compiled vue render functions receive the same treatment as user code
8181
// (mostly babel)
8282
const matchesJS = createMatcher(`test.js`)
83+
const matchesTS = createMatcher(`test.ts`)
8384
const jsRulesForRenderFn = rules
84-
.filter((r) => r !== vueRule && matchesJS(r))
85+
.filter((r) => r !== vueRule && (matchesJS(r) || matchesTS(r)))
8586
.map(cloneRuleForRenderFn)
8687

8788
// pitcher for block requests (for injecting stylePostLoader and deduping
@@ -175,7 +176,7 @@ function cloneRuleForRenderFn(rule: webpack.RuleSetRule) {
175176
if (parsed.vue == null || parsed.type !== 'template') {
176177
return false
177178
}
178-
const fakeResourcePath = `${currentResource}.js`
179+
const fakeResourcePath = `${currentResource}.${parsed.ts ? `ts` : `js`}`
179180
if (resource && !resource(fakeResourcePath)) {
180181
return false
181182
}

‎src/pluginWebpack5.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,11 @@ class VueLoaderPlugin implements Plugin {
195195
// compiled vue render functions receive the same treatment as user code
196196
// (mostly babel)
197197
const jsRulesForRenderFn = rules
198-
.filter((r) => r !== rawVueRule && match(r, 'test.js').length > 0)
198+
.filter(
199+
(r) =>
200+
r !== rawVueRule &&
201+
(match(r, 'test.js').length > 0 || match(r, 'test.ts').length > 0)
202+
)
199203
.map((rawRule) => cloneRule(rawRule, refs, jsRuleCheck, jsRuleResource))
200204

201205
// global pitcher (responsible for injecting template compiler loader & CSS
@@ -259,7 +263,7 @@ const jsRuleCheck = (query: qs.ParsedUrlQuery): boolean => {
259263
}
260264

261265
const jsRuleResource = (query: qs.ParsedUrlQuery, resource: string): string =>
262-
`${resource}.js`
266+
`${resource}.${query.ts ? `ts` : `js`}`
263267

264268
let uid = 0
265269

‎src/resolveScript.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
TemplateCompiler,
77
} from '@vue/compiler-sfc'
88
import { VueLoaderOptions } from 'src'
9+
import { resolveTemplateTSOptions } from './util'
910

1011
const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
1112
const serverCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
@@ -63,7 +64,10 @@ export function resolveScript(
6364
templateOptions: {
6465
ssr: isServer,
6566
compiler,
66-
compilerOptions: options.compilerOptions,
67+
compilerOptions: {
68+
...options.compilerOptions,
69+
...resolveTemplateTSOptions(descriptor, options.compilerOptions),
70+
},
6771
transformAssetUrls: options.transformAssetUrls || true,
6872
},
6973
})

0 commit comments

Comments
 (0)